Аннотация типа объекта

Тренажер по TypeScript для пользователей с начальным уровнем подготовки.

Тренажер по TypeScript

В TypeScript аннотация типа объекта позволяет явно описать структуру объекта: какие свойства он содержит и какого они типа. Это фундамент типобезопасной разработки — компилятор проверит, что объект соответствует описанной форме.

Синтаксис аннотации:

let user: { name: string; age: number } = { name: "Alex", age: 25 };

Свойства перечисляются в фигурных скобках через точку с запятой или запятую. Можно указать необязательные свойства с помощью ?:

let config: { debug?: boolean } = {};

Онлайн-тренажер поможет освоить практические примеры аннотаций объектов в интерактивных заданиях.

Список тем

1. Базовая аннотация объекта

id: 40645_obj_annot_01_replace

В этом задании вам нужно дополнить аннотацию типа объекта в TypeScript. Объект описывает информацию о пользователе: имя (строка), возраст (число) и статус студента (логическое значение). Заполните пропуски соответствующими типами данных (string, number, boolean), чтобы код стал корректным с точки зрения типизации. Обратите внимание на значения, присвоенные свойствам объекта — они подскажут, какие типы нужно использовать.

Заполните пропуски
let user: {
    name: input1S,
    age: input2S,
    isStudent: input3S
} = {
    name: "Alex",
    age: 22,
    isStudent: true
};
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Исправь ошибку в типе

id: 40645_obj_annot_02_error

В этом фрагменте TypeScript-кода определён объект person с аннотацией типа. Однако, в аннотации допущена ошибка: тип одного из свойств не соответствует значению, которое присваивается этому свойству. Найдите и исправьте эту ошибку, чтобы код мог быть скомпилирован без ошибок типизации.

Найдите ошибку и исправьте
let person: { name: string, age: string, isStudent: boolean };
person = { name: "Alice", age: 30, isStudent: true };
console.log("Name: " + person.name);
console.log("Age: " + person.age);
console.log("Student: " + person.isStudent);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Собери объект с типом

id: 40645_obj_annot_03_build

Из предложенных строк соберите корректное объявление типизированного объекта в TypeScript. Объект должен описывать книгу с полями: title (строка), author (строка), year (число). Объявление должно включать аннотацию типа и присваивание объекта с соответствующими значениями. Не включайте лишние строки, которые не требуются для объявления объекта.

Перетяните в правильном порядке строки из одного блока в другой
const book: { title: string; author: string; year: number }
= {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
    year: 1925
};
    genre: "novel",
console.log(book);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Скомпилируется ли код?

id: 40645_obj_annot_04_predict

Проанализируйте приведённый фрагмент кода TypeScript с аннотацией типа объекта. Определите, будет ли код успешно скомпилирован, или возникнет ошибка, и если да, то какого типа. Обратите внимание на соответствие структуры объекта заявленному типу.

Выберите правильный вариант ответа
type UserProfile = {
    username: string;
    age: number;
    isActive: boolean;
};

const currentUser: UserProfile = {
    username: "alex123",
    age: 28,
    isActive: true,
    lastLogin: "2023-10-05"
};
Сообщения
Проверить
Показать подсказку

5. Сопоставь аннотации

id: 40645_obj_annot_05_compare

В левой колонке приведены примеры объектов TypeScript с конкретными значениями. В правой колонке — возможные аннотации типов для объектов. Сопоставьте каждый объект из левой колонки с соответствующей ему аннотацией типа из правой. Обратите внимание на типы свойств (строки, числа, булевы значения, массивы) и их обязательность. Всего нужно сопоставить 5 пар.

Сопоставьте строки в правой(нижней) части с соответствующими строками в левой(верхней) по порядковому номеру
const user = {
  name: 'Alice',
  age: 30
};
const point = {
  x: 10,
  y: 20
};
const config = {
  id: 1,
  active: true,
  tags: ['new', 'feature']
};
const book = {
  title: 'TypeScript Guide',
  pages: 300,
  isPublished: true
};
const data = {
  values: [1, 2, 3],
  count: 3,
  description?: 'Sample data'
};
{
  title: string;
  pages: number;
  isPublished: boolean;
}
{
  values: number[];
  count: number;
  description?: string;
}
{
  id: number;
  active: boolean;
  tags: string[];
}
{
  name: string;
  age: number;
}
{
  x: number;
  y: number;
}
Сообщения
Проверить
Показать подсказку

6. Выбери правильные типы

id: 40645_obj_annot_06_select

В этом задании вам нужно дополнить аннотацию типа объекта, выбрав подходящие типы для каждого свойства из выпадающего списка. Код описывает объект, представляющий информацию о книге, с несколькими свойствами. Вам нужно определить тип каждого свойства, основываясь на присваиваемых значениях. Обратите внимание на различия между примитивными типами, массивами и специальным типом undefined.

Нужно правильно расставить в пропуски предложенные варианты
let book: {
  title: input1S;
  year: input2S;
  isAvailable: input3S;
  genres: input4S;
  discount: input5S;
} = {
  title: "TypeScript in Depth",
  year: 2023,
  isAvailable: true,
  genres: ["Programming", "Reference"],
  discount: undefined
};
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

7. Найди необязательные свойства

id: 40645_obj_annot_07_click

Перед вами фрагмент кода на TypeScript, содержащий аннотацию типа объекта. Внимательно изучите объявление интерфейса. Ваша задача — найти и выделить кликом все свойства, которые объявлены как необязательные. Не отмечайте обязательные свойства, имя интерфейса, ключевые слова языка или служебные символы (фигурные скобки, точки с запятой).

Кликните по всем фрагментам, которые подходят под условие задания.
interface {{User~|~t0}} {
  {{id~|~t1}}: number;
  {{name~|~t2}}: string;
  {{email~|~t3}}?: string;
  {{age~|~t4}}?: number;
  {{isActive~|~t5}}: boolean;
  {{lastLogin~|~t6}}: Date;
}
Сообщения
Проверить
Показать подсказку

TypeScript: компиляция и запуск

id: 40645_compiler

Демонстрация аннотации типов для объектов в TypeScript. Этот пример показывает, как описывать структуру объектов, включая обязательные и необязательные свойства. Экспериментируйте: изменяйте значения свойств, добавляйте новые поля, пробуйте нарушить типизацию, чтобы увидеть ошибки компиляции. Попробуйте создать свои интерфейсы и типы для различных сущностей!

TS
Запустить тренажёр (TypeScript)
НайтиКурс.Ру