Для чего используется вопросительный знак в параметрах функций TypeScript?

Что означает вопросительный знак в параметрах TypeScript?

Вопросительный знак (?) перед типом параметра делает этот параметр необязательным (optional). Это специальный синтаксис TypeScript, который говорит компилятору: "Этот параметр может быть передан, а может и не быть". Если параметр не передан, его значение будет undefined.

Как это работает?

Рассмотрим ваш пример:

function greet(name?: string) {
  return `Hello, ${name || 'Guest'}!`;
}

// Все эти вызовы корректны:
greet('Alice');  // "Hello, Alice!"
greet();         // "Hello, Guest!"
greet(undefined); // "Hello, Guest!"

Если убрать вопросительный знак, параметр станет обязательным:

function greet(name: string) {
  return `Hello, ${name}!`;
}

greet('Alice'); // ✅ OK
greet();        // ❌ Ошибка: Expected 1 arguments, but got 0
greet(undefined); // ❌ Ошибка: Argument of type 'undefined' is not assignable to parameter of type 'string'

Разница между name?: string и name: string | undefined

Это важный момент, который часто путают. Рассмотрим оба варианта:

// Вариант 1: необязательный параметр
function foo1(x?: number) {
  console.log(x); // number | undefined
}

// Вариант 2: объединение с undefined
function foo2(x: number | undefined) {
  console.log(x); // number | undefined
}

// Теперь вызовы:
foo1();      // ✅ OK
foo1(5);     // ✅ OK
foo1(undefined); // ✅ OK

foo2();      // ❌ Ошибка: Expected 1 argument, but got 0
foo2(5);     // ✅ OK
foo2(undefined); // ✅ OK

Ключевое отличие:

• name?: string — параметр можно не передавать вообще. Компилятор разрешает вызов без аргумента.
• name: string | undefined — параметр обязателен, но может принимать значение undefined. Вы обязаны передать аргумент, даже если это undefined.

Где это полезно?

Необязательные параметры часто используются в:

• Конфигурационных объектах — когда часть полей может отсутствовать.
• Колбэках — например, в обработчиках событий, где некоторые данные опциональны.
• API-функциях — чтобы не заставлять пользователя передавать все параметры.

Пример с конфигурацией:

interface Config {
  url: string;
  method?: 'GET' | 'POST';  // необязательно
  timeout?: number;          // необязательно
}

function fetchData(config: Config) {
  const method = config.method || 'GET';
  const timeout = config.timeout ?? 5000;
  // ...
}

fetchData({ url: '/api/data' }); // ✅ OK
fetchData({ url: '/api/data', method: 'POST' }); // ✅ OK

Важные ограничения

Необязательные параметры могут идти только после обязательных. Нельзя сделать так:

function badExample(x?: number, y: string) { } // ❌ Ошибка: A required parameter cannot follow an optional parameter

Правильно будет:

function goodExample(y: string, x?: number) { } // ✅ OK

Также стоит помнить, что при использовании строгой проверки на undefined (флаг strictNullChecks в tsconfig.json) TypeScript будет требовать явной проверки перед использованием необязательного параметра, если вы не используете защиту типа:

function printLength(text?: string) {
  // console.log(text.length); // ❌ Ошибка: Object is possibly 'undefined'
  
  if (text) { // Проверка
    console.log(text.length); // ✅ OK
  }
}

Итог

Вопросительный знак — это удобный синтаксический сахар TypeScript, который делает параметр необязательным. Он эквивалентен param: Type | undefined, но с одним важным отличием: такой параметр можно полностью опустить при вызове функции. Используйте его для повышения гибкости API и улучшения читаемости кода.

// Вместо этого:
function createUser(name: string, age?: number, email?: string, isAdmin?: boolean) {
  // ...
}

// Лучше так:
interface UserOptions {
  age?: number;
  email?: string;
  isAdmin?: boolean;
}

function createUser(name: string, options: UserOptions = {}) {
  const { age, email, isAdmin } = options;
  // ...
}

createUser('Alice', { age: 30 });
createUser('Bob', { email: 'bob@test.com', isAdmin: true });
createUser('Charlie'); // все опциональные поля опущены