Сокращенная инициализация в конструкторе

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

Тренажер по TypeScript

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

Вместо того чтобы объявлять поле в теле класса, принимать его в конструкторе и писать this.x = x, вы можете просто добавить модификатор доступа (public, private, protected или readonly) перед аргументом конструктора.

Пример:
constructor(public name: string) {}
Это автоматически создаст публичное поле name и присвоит ему переданное значение.

Список тем

1. Добавление модификатора

id: 40704_cons_01_replace

В TypeScript существует сокращенная инициализация свойств класса через конструктор. Для этого перед параметром конструктора нужно указать модификатор доступа (public, private или protected). В данном фрагменте кода один параметр уже имеет модификатор public, а второй — нет. Добавьте модификатор public перед вторым параметром, чтобы он также стал свойством класса. После этого код будет корректно компилироваться, и оба параметра станут свойствами класса.

Заполните пропуски
class Person {
    constructor(public name: string, input1S age: number) {
    }
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Обычный vs Сокращенный

id: 40704_cons_02_compare

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

Сопоставьте строки в правой(нижней) части с соответствующими строками в левой(верхней) по порядковому номеру
Классическая инициализация: объявление поля 'name' типа string и присваивание значения в конструкторе
Сокращенная инициализация: использование параметра с модификатором 'public' для поля 'name'
Классическая инициализация: два поля (name и age) с присваиванием в конструкторе
Сокращенная инициализация: два параметра с модификаторами (public name и private age)
constructor(public name: string) {}
constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
}
constructor(name: string) {
    this.name = name;
}
constructor(public name: string, private age: number) {}
Сообщения
Проверить
Показать подсказку

3. Дублирование свойств

id: 40704_cons_03_error

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

Найдите ошибку и исправьте
class Person {
    name: string;
 
    constructor(public name: string) {
        // Инициализация происходит автоматически
    }
 
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Класс User

id: 40704_cons_04_build

Из предложенных строк соберите корректный класс User на TypeScript, использующий сокращенную инициализацию в конструкторе для полей id (private) и name (public). Класс должен быть объявлен полностью, включая открывающую и закрывающую фигурные скобки. Лишние строки, не относящиеся к объявлению класса с сокращенной инициализацией, в решение включать не нужно.

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

5. Какие станут свойствами?

id: 40704_cons_05_click

Внимательно изучите код на TypeScript. В конструкторе класса Person есть четыре аргумента, но только два из них имеют модификаторы доступа. Отметьте кликом только те аргументы конструктора, которые станут свойствами класса. Не отмечайте аргументы без модификаторов, имя класса, ключевое слово constructor, скобки или другие элементы кода.

Кликните по всем фрагментам, которые подходят под условие задания.
class Person {
  constructor(
    {{name: string~|~t1}},
    {{public age: number~|~t2}},
    {{private id: number~|~t3}},
    {{city: string~|~t4}}
  ) {
    // ...
  }
}
Сообщения
Проверить
Показать подсказку

6. Жизненный цикл

id: 40704_cons_06_sequencing

В этом задании вам предстоит восстановить правильную последовательность этапов создания объекта в TypeScript при использовании parameter properties (сокращённой инициализации в конструкторе). Перед вами пять текстовых описаний шагов, которые перемешаны. Ваша задача — расставить их сверху вниз в том порядке, в котором они происходят в жизненном цикле создания объекта: начиная с вызова оператора new, заканчивая готовым объектом. Обратите внимание, что при parameter properties присвоение значений свойствам происходит автоматически до выполнения тела конструктора.

Расставьте строки в правильном порядке
Объект успешно создан и готов к использованию.
Автоматическое присвоение значений параметров свойствам класса, если используются parameter properties.
Вызов оператора new для создания экземпляра класса.
Выполнение кода в теле конструктора.
Вход в конструктор класса.
Сообщения
Проверить
Показать подсказку

7. Видимость свойства

id: 40704_cons_07_predict

Рассмотрите код на TypeScript, в котором используется сокращенная инициализация свойства в конструкторе с модификатором доступа private. Затем вне класса происходит попытка обратиться к этому свойству. Что произойдет при попытке выполнить этот код в редакторе TypeScript (например, в VS Code)? Выберите верный вариант ответа.

Выберите правильный вариант ответа
class SecretHolder {
    constructor(private secret: string) {}

    public reveal(): string {
        return this.secret;
    }
}

const obj = new SecretHolder('confidential');
console.log(obj.secret); // Что произойдет здесь?
Сообщения
Проверить
Показать подсказку

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

id: 40704_compiler

Изучите магию сокращенной инициализации свойств в TypeScript! Вместо того чтобы отдельно объявлять поля класса и присваивать им значения в теле конструктора, вы можете сделать это одной строкой, добавив модификаторы доступа (public, private, readonly) прямо к параметрам. Попробуйте добавить свои свойства, такие как 'email' или 'experience', и посмотрите, как это отразится на создании объекта. Экспериментируйте с модификатором readonly: попробуйте изменить значение свойства после создания объекта и посмотрите, что скажет компилятор!

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