Бесплатный курс по TypeScript. Зарегистрируйтесь для отслеживания прогресса →

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: string = 'Guest') {
  return `Hello, ${name.toUpperCase()}!`;
}

getGreetingPhrase() // Hello, Guest!

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

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

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

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

Задание

Реализуйте функцию getHiddenCard(), которая принимает на вход номер кредитки (состоящий из 16 цифр) в виде строки и возвращает его скрытую версию, которая может использоваться на сайте для отображения. Если исходная карта имела номер 2034399002125581, то скрытая версия выглядит так ****5581. Другими словами, функция заменяет первые 12 символов, на звездочки. Количество звездочек регулируется вторым необязательным параметром. Значение по умолчанию — 4.

// Кредитка передается внутрь как строка
getHiddenCard('1234567812345678', 2) // "**5678"
getHiddenCard('1234567812345678', 3) // "***5678"
getHiddenCard('1234567812345678')    // "****5678"
getHiddenCard('2034399002121100', 1) // "*1100"
Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе