Интерфейсы в TypeScript — это способ описать структуру объекта: какие свойства и методы он должен содержать.
Синтаксис объявления:
interface User {
name: string;
age: number;
}
После объявления интерфейса можно использовать его как тип для переменных, параметров функций и возвращаемых значений.
- Свойства описывают данные объекта
- Необязательные свойства помечаются знаком
? - Readonly свойства нельзя изменить после создания
Интерфейсы — основа объектно-ориентированного программирования в TypeScript. Они обеспечивают строгую типизацию и помогают избежать ошибок при работе с объектами.
Выполни практические задания, чтобы освоить объявление интерфейсов с нуля.
- Модуль 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. Интерфейс должен описывать объект пользователя с двумя свойствами: name (строка) и age (число). В приведённом фрагменте кода пропущено ключевое слово для объявления интерфейса и тип одного из свойств. Заполните пропуски так, чтобы интерфейс User был объявлен корректно и соответствовал описанию.
input1S User {
name: string;
age: input2S;
}2. Выбери типы свойств
В этом задании вам предстоит определить типы свойств интерфейса TypeScript. Ниже представлен интерфейс Book с пятью свойствами, но для четырёх из них тип не указан. Используя выпадающие списки, выберите для каждого свойства подходящий тип данных из предложенных вариантов. Обратите внимание на уже указанный тип для свойства published и на смысл каждого свойства (например, название — строка, год — число).
interface Book {
title: input1S;
year: input2S;
available: input3S;
tags: input4S;
published: Date;
}3. Найди синтаксическую ошибку
В этом фрагменте TypeScript-кода объявлен интерфейс, но допущена одна синтаксическая ошибка, из-за которой код не будет компилироваться. Найдите строку с ошибкой и исправьте её, чтобы интерфейс был объявлен корректно. Обратите внимание на правильный синтаксис объявления свойств интерфейса.
interface User { name string age: number; email: string;}4. Собери интерфейс из частей
Из предложенных строк соберите корректный интерфейс TypeScript с именем User, который описывает объект пользователя с полями id (число), name (строка), age (число) и email (строка). Одна из строк содержит неверный тип для поля name и должна быть исключена из решения. Порядок свойств в интерфейсе должен быть следующим: id, name, age, email.
interface User { id: number; name: string; age: number; email: string;} name: number;5. Интерфейсы и объекты
В левой колонке приведены объявления интерфейсов TypeScript с разными наборами свойств. В правой колонке представлены объекты, которые соответствуют этим интерфейсам. Сопоставьте каждый интерфейс с объектом, который удовлетворяет его описанию. Обратите внимание, что в правой колонке нет лишних объектов — каждый объект соответствует ровно одному интерфейсу.
interface Point {
x: number;
y: number;
}interface User {
id: number;
name: string;
email?: string;
}interface Animal {
species: string;
age: number;
makeSound(): void;
}interface Config {
readonly apiUrl: string;
timeout: number;
retry: boolean;
}interface Product {
id: string;
price: number;
inStock: boolean;
discount?: number;
}{
x: 10,
y: 20
}{
species: "Cat",
age: 3,
makeSound: () => console.log("Meow")
}{
id: "p123",
price: 99.99,
inStock: true,
discount: 15
}{
id: 1,
name: "Alice",
email: "alice@example.com"
}{
apiUrl: "https://api.example.com",
timeout: 5000,
retry: true
}6. Отметь обязательные свойства
Перед вами объявление интерфейса на TypeScript. Внимательно изучите код и определите, какие свойства в этом интерфейсе являются обязательными (т.е. должны присутствовать у любого объекта, соответствующего этому интерфейсу). Отметьте кликом только обязательные свойства. Не отмечайте необязательные свойства (помеченные знаком вопроса `?`), ключевое слово `interface`, имя интерфейса, фигурные скобки и другие служебные элементы кода.
interface {{UserProfile~|~t0}} {
{{id~|~t1}}: number;
{{username~|~t2}}: string;
{{email~|~t3}}?: string;
{{age~|~t4}}: number;
{{isActive~|~t5}}?: boolean;
{{role~|~t6}}: string;
{{lastLogin~|~t7}}?: Date;
}7. Разметь части интерфейса
В этом задании вам нужно разметить части объявления интерфейса TypeScript. Для каждого выделенного фрагмента укажите, является ли он ключевым словом, именем интерфейса, именем свойства или типом свойства. Это упражнение поможет закрепить понимание структуры интерфейсов в TypeScript и их основных компонентов.
{{interface~|~t1}} {{Product~|~t2}} { {{name~|~t3}}: {{string~|~t4}}; {{price~|~t5}}: {{number~|~t6}}; }8. Порядок объявления и использования
Перед вами строки TypeScript-кода, которые описывают объявление и использование интерфейса. Они перемешаны. Расставьте строки в правильном порядке, чтобы получился корректный код: сначала объявляется интерфейс с его свойствами, затем переменная с типом этого интерфейса, и, наконец, присваивание объекта этой переменной.
let user: Person; name: string; age: number;}user = { name: 'Alice', age: 30 };interface Person {9. Какое значение у свойства?
В данном фрагменте кода TypeScript определён интерфейс, описывающий структуру объекта, и создан объект, соответствующий этому интерфейсу. Затем выполняется обращение к конкретному свойству этого объекта. Проанализируйте код и определите, какое значение будет выведено при доступе к указанному свойству. Введите одно число или строку (в зависимости от типа свойства) без дополнительных символов.
interface Person {
name: string;
age: number;
}
const person: Person = {
name: "Alice",
age: 25
};
console.log(person.age);