Типизация свойств класса

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

Тренажер по TypeScript

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

Каждое свойство в классе может быть объявлено с указанием типа (string, number, boolean, пользовательский тип и др.) и, при необходимости, модификаторов доступа (public, private, protected). Это помогает компилятору находить ошибки на этапе разработки, а не во время выполнения.

Например:

class User {
public name: string;
private age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}

Практический тренажер по TypeScript с примерами и заданиями поможет вам разобраться в этой теме без скучной теории. Уроки построены так, чтобы вы сразу применяли знания на практике.

Список тем

1. Объявление типизированных свойств

id: 40699_ts_class_01

Дан фрагмент кода класса Person на TypeScript, в котором объявлены три свойства: name, age и isStudent. Однако в коде пропущены типы этих свойств. Исходя из использования свойств в методах greet и study, определите и впишите правильные типы для каждого свойства. Заполните пропуски так, чтобы код класса был корректно типизирован и компилировался без ошибок.

Заполните пропуски
class Person {
  name: input1S;
  age: input2S;
  isStudent: input3S;

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }

  study() {
    if (this.isStudent) {
      console.log(`${this.name} is studying.`);
    }
  }
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

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

id: 40699_ts_class_02

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

Найдите ошибку и исправьте
class User {
  name: string;
  age: number;
 
  constructor(name: string, age: number) {
    this.name = name;
    this.age = '25';
  }
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Подбери тип для свойства

id: 40699_ts_class_03

В данном задании представлен класс Book, который используется для хранения информации о книге. В коде класса пропущены типы у свойств. Вам необходимо для каждого пропуска (input1, input2, input3, input4) выбрать подходящий тип из выпадающего списка. Обратите внимание на то, как свойства используются в конструкторе и методах класса, чтобы правильно определить их типы.

Нужно правильно расставить в пропуски предложенные варианты
class Book {
  title: input1S;
  year: input2S;
  available: input3S;
  tags: input4S;

  constructor(title: string, year: number) {
    this.title = title;
    this.year = year;
    this.available = true;
    this.tags = [];
  }

  markAsUnavailable(): void {
    this.available = false;
  }

  addTag(tag: string): void {
    this.tags.push(tag);
  }
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Сопоставь свойство и тип

id: 40699_ts_class_04

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

Сопоставьте строки в правой(нижней) части с соответствующими строками в левой(верхней) по порядковому номеру
id
username
status
profile
tags
createdAt
'active' | 'inactive'
object
number
string
string[]
Date
Сообщения
Проверить
Показать подсказку

5. Что выведет конструктор?

id: 40699_ts_class_05

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

Выберите правильный вариант ответа
class User {
  name: string;
  age: number;
  isActive: boolean;
  role?: string;

  constructor(name: string, age: number, isActive: boolean) {
    this.name = name;
    this.age = age;
    this.isActive = isActive;
  }
}

const newUser = new User('Alice', 30, true);
// Какое значение будет у свойства role объекта newUser?
Сообщения
Проверить
Показать подсказку

6. Собери объявление класса

id: 40699_ts_class_07

Из предложенных строк соберите корректное объявление класса Product на TypeScript. Класс должен содержать два типизированных свойства (name и price), конструктор, который инициализирует эти свойства, и метод getInfo, возвращающий строку с информацией о продукте. Две строки являются лишними и не должны входить в решение.

Перетяните в правильном порядке строки из одного блока в другой
class Product {
  name: string;
  price: number;
  constructor(name: string, price: number) { this.name = name; this.price = price; }
  getInfo(): string { return `Product: ${this.name}, Price: ${this.price}`; }
}
  category: string;
  printName(): void { console.log(this.name); }
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

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

id: 40699_compiler

В этом упражнении мы разберем основы типизации свойств внутри классов TypeScript. Вы узнаете, как явно указывать типы полей, использовать модификатор `readonly` для защиты данных от изменений и задавать значения по умолчанию. Попробуйте добавить новое свойство `email` в класс, измените значения в объекте `user` или попытайтесь перезаписать ID, чтобы увидеть, как TypeScript оберегает ваш код от ошибок. Экспериментируйте: создайте свой собственный класс, например `Car` или `Product`, и проверьте, как работают типы в ваших методах!

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