TypeScript: Именованные функции

• Обязательный параметр
• Необязательный параметр
• Значение по умолчанию
• Тип возвращаемого значения
• Выводы

В определении переменной мы обычно не указываем ее тип, так как он выводится автоматически. С функциями это не работает. Для них нужно обязательно указывать типы всех входных параметров.

В этом уроке разберем, как сделать параметр необязательным, нужно ли что-то делать со значением переменной по умолчанию, и как выводить тип возвращаемого значения.

Обязательный параметр

Определим функцию и укажем тип входного параметра:

function getGreetingPhrase(name: string) {
  return `Hello, ${name.toUpperCase()}!`;
}

При таком указании параметр будет обязательным. Если вызвать функцию без параметра, это приведет к ошибке компиляции:

// Expected 1 arguments, but got 0.
getGreetingPhrase();

Необязательный параметр

Чтобы сделать параметр необязательным, нужно добавить знак «?» после имени переменной:

function getGreetingPhrase(name?: string) {
  return `Hello, ${name ? name.toUpperCase() : 'Guest'}!`;
}

getGreetingPhrase('Mike'); // Hello, MIKE!
getGreetingPhrase(); // Hello, Guest!

В таком случае тип переменной name становится составным (Union Type): string | undefined — строка или undefined.

Необязательный параметр может быть undefined, но не null. Чтобы добавить null, нужно изменить определение так:

function getGreetingPhrase(name?: string | null) {
  return `Hello, ${name ? name.toUpperCase() : 'Guest'}!`;
}

Здесь мы расширили определение типа переменной name до string | undefined | null.

Значение по умолчанию

Со значением по умолчанию не нужно ничего указывать дополнительно. Значение задается как в JavaScript. Сама переменная автоматически становится необязательной, и тип выводится, исходя из переданного значения:

function getGreetingPhrase(name = 'Guest') {
  return `Hello, ${name.toUpperCase()}!`;
}

getGreetingPhrase() // Hello, GUEST!

Тип возвращаемого значения

Во многих случаях TypeScript выводит тип возвращаемого значения самостоятельно, но его можно указывать явно:

function getGreetingPhrase(name: string): string {
  return `Hello, ${name.toUpperCase()}!`;
}

Возвращаемый тип может выводиться, но иногда из этого получается не то, что мы ожидаем. Поэтому мы рекомендуем всегда проставлять тип. Это упрощает документирование и защищает код от случайных изменений.

Выводы

В этом уроке мы узнали, как сделать параметр необязательным, как работать со значением переменной по умолчанию и как выводить тип возвращаемого значения.

Задание

Реализуйте функцию getHiddenCard(). Она принимает на вход номер кредитки, который состоит из 16 цифр, в виде строки и возвращает его скрытую версию. Эта версия может использоваться на сайте для отображения. Например, если номер исходной карты был 2034399002125581, то скрытая версия выглядит так: ****5581.

Получается, функция заменяет первые 12 символов на звездочки. Количество звездочек регулируется вторым необязательным параметром. Значение по умолчанию — 4.

// Кредитка передается внутрь как строка
getHiddenCard('1234567812345678', 2) // "**5678"
getHiddenCard('1234567812345678', 3) // "***5678"
getHiddenCard('1234567812345678')    // "****5678"
getHiddenCard('2034399002121100', 1) // "*1100"