Як задати параметр за умовчанням?

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

Синтаксис параметра за умовчанням

javascript

function functionName(parameter: Type = defaultValue): ReturnType {
  // ...
}

Якщо під час виклику функції аргумент не передано, використовується значення, вказане після знака =.

Приклад 1. Простий параметр за умовчанням

javascript

function greet(name: string = "Гість"): void {
  console.log(`Привіт, ${name}!`);
}

greet();         // "Привіт, Гість!"
greet("Тім");    // "Привіт, Тім!"

Тут:

параметр name має тип string
за відсутності аргументу функція використовує "Гість"

Приклад 2. Декілька параметрів з різними значеннями за умовчанням

javascript

function connect(host: string = "localhost", port: number = 3000): void {
  console.log(`Підключення до ${host}:${port}`);
}

connect();                  // localhost:3000
connect("127.0.0.1");       // 127.0.0.1:3000
connect("192.168.1.1", 8080); // 192.168.1.1:8080

Приклад 3. Значення за умовчанням може залежати від інших параметрів

javascript

function createUser(name: string, isAdmin: boolean = false) {
  console.log({ name, isAdmin });
}

createUser("Tim");          // { name: 'Tim', isAdmin: false }
createUser("Alex", true);   // { name: 'Alex', isAdmin: true }

Приклад 4. Складні значення за умовчанням

Можна використовувати об'єкти, масиви і навіть виклики функцій:

javascript

function generateId(): number {
  return Math.floor(Math.random() * 1000);
}

function createUser(name: string, id: number = generateId()) {
  console.log(`Користувач ${name}, id: ${id}`);
}

createUser("Tim");  // випадковий id
createUser("Alex", 42); // id = 42

Як TypeScript типізує параметри зі значенням за умовчанням

Параметр зі значенням за умовчанням автоматично вважається необов'язковим, але при цьому його тип виводиться за значенням.

javascript

function logCount(count = 10) {
  // тип count → number (TS сам визначив)
  console.log(count);
}

Еквівалентно:

javascript

function logCount(count: number = 10) { ... }

Тобто якщо ти вказав значення за умовчанням, знак питання (?) не потрібен. Ці два записи різні:

javascript

function test(a?: number) {} // параметр може бути undefined
function test(a: number = 5) {} // параметр завжди number (ніколи не undefined)

Помилка при неправильному порядку

Параметри зі значеннями за умовчанням мають йти після обов'язкових:

javascript

function greet(name = "Гість", age: number) {} // Помилка

Потрібно так:

javascript

function greet(age: number, name = "Гість") {} //

Але можна ставити обов'язкові параметри після, якщо їх явно передавати під час виклику - тоді TypeScript не проти:

javascript
function greet(name = "Гість", age?: number) {} greet(undefined, 25); //

Приклад: поєднання `?` і `=`

Іноді корисно явно вказати, що параметр може бути переданий, але якщо він undefined, підставляється дефолтне значення:

javascript

function greet(name?: string) {
  const finalName = name ?? "Гість"; // оператор nullish coalescing
  console.log(`Привіт, ${finalName}!`);
}

greet();          // Привіт, Гість!
greet(undefined); // Привіт, Гість!
greet("Тім");     // Привіт, Тім!

Підсумок

Приклад	Поведінка	Тип параметра
`function f(x = 10)`	підставить 10, якщо не передано	`number`
`function f(x?: number)`	`x` може бути `undefined`	`number \| undefined`
`function f(x: number = 10)`	`x` завжди `number`, навіть якщо не передано	`number`
`function f(a: string, b = a + "!")`	значення залежить від іншого аргументу	`string`

Простий спосіб запам'ятати

= → значення підставляється автоматично ? → значення може бути не передане (undefined)

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

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

Premium

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