В определении переменной мы обычно не указываем ее тип, так как он выводится автоматически. С функциями это не работает. Для них нужно обязательно указывать типы всех входных параметров.
В этом уроке разберем, как сделать параметр необязательным, нужно ли что-то делать со значением переменной по умолчанию, и как выводить тип возвращаемого значения.
Определим функцию и укажем тип входного параметра:
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"
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Ваше упражнение проверяется по этим тестам
1import * as ta from 'type-assertions';
2
3import getHiddenCard from './index';
4
5test('getHiddenCard', () => {
6 expect(getHiddenCard('1234123412341234')).toEqual('****1234');
7 expect(getHiddenCard('1234123412344321')).toEqual('****4321');
8 expect(getHiddenCard('1234123412344321', 2)).toEqual('**4321');
9 expect(getHiddenCard('1234123412341234', 12)).toEqual('************1234');
10
11 ta.assert<ta.Equal<ReturnType<typeof getHiddenCard>, string>>();
12});
13
Решение учителя откроется через: