Типізація параметрів у функції

TypeScriptJunior~1 хв читання

1. Загальний синтаксис

javascript

function functionName(param1: Type1, param2: Type2, ...): ReturnType {
  // тіло функції
}

Приклад: проста типізація параметрів

javascript

function greet(name: string, age: number): void {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

name: string -> параметр name повинен бути рядком
age: number -> параметр age повинен бути числом
: void -> функція нічого не повертає

2. Типізація значення, що повертається

Тип після ) вказує, що функція повертає:

javascript

function sum(a: number, b: number): number {
  return a + b;
}

вхід: два числа
вихід: число (number)

Якщо не вказати тип, TypeScript сам виведе його з return, але явне вказання робить код зрозумілішим і безпечнішим.

3. Необов'язкові параметри (`?`)

Якщо параметр може бути відсутнім - додай ?:

javascript

function greet(name: string, age?: number): void {
  console.log(`Hello, ${name}${age ? ", you are " + age + " years old" : ""}.`);
}

greet("Tim");       // без віку
greet("Alex", 25);  // з віком

Тип age тут автоматично стає number | undefined.

4. Параметри зі значенням за замовчуванням

Якщо задати значення за замовчуванням, параметр теж стає необов'язковим, і його тип виводиться автоматично:

javascript

function greet(name: string, age: number = 18): void {
  console.log(`${name}, you are ${age} years old.`);
}

greet("Tim");       // використовує 18
greet("Alex", 30);  // перевизначає

5. Типізація параметрів функцій, що приймають масиви або об'єкти

javascript

function printNames(names: string[]): void {
  console.log(names.join(", "));
}

function showUser(user: { name: string; age: number }): void {
  console.log(`${user.name}, ${user.age}`);
}

printNames(["Tim", "Alex"]);
showUser({ name: "Tim", age: 24 });

6. Передача функції як параметра

Ти можеш передати в параметр іншу функцію, і задати їй тип (сигнатуру):

javascript

function calculate(a: number, b: number, operation: (x: number, y: number) => number): number {
  return operation(a, b);
}

const result = calculate(5, 3, (x, y) => x * y);
console.log(result); // 15

7. Використання `type` для читабельності

javascript

type MathOp = (a: number, b: number) => number;

function applyOperation(a: number, b: number, op: MathOp): number {
  return op(a, b);
}

applyOperation(4, 2, (x, y) => x / y);

8. Приклад з узагальненими типами (generic parameters)

Якщо функція повинна працювати з різними типами, використай <T>:

javascript

function identity<T>(value: T): T {
  return value;
}

const num = identity(42);       // T = number
const text = identity("hello"); // T = string

Підсумок

Особливість	Приклад	Опис
Простий параметр	`(name: string)`	приймає рядок
Кілька параметрів	`(a: number, b: number)`	приймає 2 числа
Необов'язковий параметр	`(age?: number)`	параметр можна не передавати
Параметр зі значенням за замовчуванням	`(age: number = 18)`	значення підставляється автоматично
Параметр-функція	`(cb: (x: number) => void)`	приймає функцію
Generic-параметр	`<T>(value: T)`	приймає значення будь-якого типу

Приклад "все разом":

javascript

function fetchData<T>(
  url: string,
  onSuccess: (data: T) => void,
  onError?: (error: string) => void
): void {
  try {
    const mockData = JSON.parse('{"name":"Tim"}') as T;
    onSuccess(mockData);
  } catch {
    onError?.("Parsing error");
  }
}

fetchData<{ name: string }>(
  "/api/user",
  (data) => console.log(data.name),
  (err) => console.error(err)
);

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.