В этом уроке мы разберем одну из фундаментальных концепций TypeScript — типизацию параметров функций. В чистом JavaScript параметры могут принимать любые значения, что часто приводит к неочевидным ошибкам во время выполнения. TypeScript позволяет явно указать, какие данные функция ожидает получить.
Синтаксис прост: после имени параметра ставится двоеточие и нужный тип. Например: function greet(name: string) { ... }. Теперь, если вы попытаетесь передать число или объект, компилятор выдаст ошибку еще до запуска кода. Это делает разработку более надежной и предсказуемой.
Мы изучим, как указывать примитивные типы (числа, строки, булевы значения) и рассмотрим, почему это важно для самодокументирования кода. Практические задания помогут вам закрепить навык написания безопасных сигнатур функций. Используя этот подход, вы сразу видите, как работает код и какие аргументы допустимы.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- Модуль 10: Type Aliases
- Модуль 11: Интерфейсы
- Модуль 12: Type Guards и Narrowing
- Модуль 13: Enums
- Модуль 14: Классы
- Модуль 15: Generics — основы
- Модуль 16: Generics — ограничения
- Модуль 17: Utility Types — базовые
- Модуль 18: Utility Types — работа с Union
- Модуль 19: Utility Types — функции
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
1. Синтаксис типизации аргументов
В этом задании вам предстоит дополнить код функции сложения двух чисел на TypeScript, указав типы для её параметров. Функция должна корректно принимать числовые аргументы и возвращать их сумму. Обратите внимание, что в коде уже присутствует двоеточие после имени каждого параметра — вам нужно вписать только название типа. После заполнения пропусков код должен успешно компилироваться и выводить результат сложения.
function add(a: input1S, b: input2S): number {
return a + b;
}
const result = add(5, 3);
console.log(result);2. Разметка сигнатуры функции
Разметьте сигнатуру функции TypeScript, указав для каждого выделенного фрагмента, является ли он именем параметра или его типом. Обратите внимание, что имя параметра — это идентификатор, который используется для обращения к значению внутри функции, а тип параметра — это аннотация, которая указывает, значения какого типа можно передавать в этот параметр.
function calculate({{amount~|~t1}}: {{number~|~t2}}, {{currency~|~t3}}: {{string~|~t4}}, {{isActive~|~t5}}: {{boolean~|~t6}}): number {
// ... тело функции
}3. Выбор подходящих типов
В этом задании вам предстоит дополнить код функции обработки данных пользователя, выбрав правильные типы для её параметров из выпадающего списка. Функция принимает три параметра: имя (строка), возраст (число) и флаг активности (логическое значение). Вам нужно для каждого пропуска в коде выбрать подходящий тип (string, number или boolean), чтобы код стал корректным с точки зрения типизации TypeScript. Обратите внимание на контекст использования каждого параметра внутри функции.
function processUserData(name: input1S, age: input2S, isActive: input3S): void {
console.log(`User: ${name}, Age: ${age}`);
if (isActive) {
console.log(`${name} is currently active.`);
} else {
console.log(`${name} is inactive.`);
}
}4. Ошибка в объявлении типа
В этом фрагменте кода TypeScript допущена синтаксическая ошибка в объявлении параметров функции. Вместо корректного указания типа параметра используется неверный символ, что приводит к невозможности компиляции. Найдите и исправьте строку с ошибкой, чтобы функция могла корректно принимать аргументы и выполняться.
function greetUser(name = string, age = number): void { console.log(`Hello, ${name}. You are ${age} years old.`);} greetUser("Alice", 30);5. Сборка типизированной функции
Из предложенных строк соберите корректное объявление функции на TypeScript. Функция должна называться `calculateTotal`, принимать два параметра: `price` типа `number` и `quantity` типа `number`, и возвращать их произведение (тип `number`). В решении должны быть только строки, необходимые для объявления функции. Лишние строки (не входящие в объявление или содержащие ошибки) включать не нужно.
function calculateTotal(price: number, quantity: number): number { return price * quantity;}function calculateTotal(price: number, quantity: string): number { console.log(price);let total = price * quantity;calculateTotal(100, 5);6. Результат работы типизированной функции
Проанализируйте приведённый код на TypeScript, включающий объявление функции с типизированными параметрами и её вызов. Выберите правильный результат выполнения программы (значение, которое будет выведено в консоль).
function concat(a: string, b: string): string {
return a + b;
}
const part1 = 'Hello, ';
const part2 = 'Type';
const part3 = 'Script!';
const result = concat(part1, concat(part2, part3));
console.log(result);7. Поиск строковых параметров
Внимательно изучите объявление функции на TypeScript ниже. Ваша задача — найти и выделить кликом только те параметры функции, которые имеют тип string. Не отмечайте параметры других типов (number, boolean, массив и т.д.), не отмечайте имя функции, её возвращаемый тип, фигурные скобки или другие элементы кода. Вам нужно найти все строковые параметры.
function processUserData(
{{id~|~t1}}: number,
{{username~|~t2}}: string,
{{email~|~t3}}: string,
{{age~|~t4}}: number,
{{isActive~|~t5}}: boolean,
{{fullName~|~t6}}: string,
{{tags~|~t7}}: string[],
{{city~|~t8}}: string,
{{score~|~t9}}: number,
{{department~|~t10}}: string,
{{lastLogin~|~t11}}: Date,
{{phone~|~t12}}: string
): void {
// ... логика функции
}