Static свойства и методы

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

Тренажер по TypeScript

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

Вы узнаете:

  • Как объявлять статические поля с помощью ключевого слова static.
  • Как обращаться к ним внутри и снаружи класса.
  • Чем они отличаются от полей экземпляра (this).

Тренажер поможет вам закрепить синтаксис через написание кода, поиск ошибок и визуализацию работы классов. Разберитесь, как работает код, чтобы избежать распространенных ошибок при использовании this в статическом контексте.

Список тем

1. Порядок инициализации

id: 40707_stat_02_seq

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

Расставьте строки в правильном порядке
console.log(Counter.count); // обращение к статике
}
Counter.count = 0; // инициализация статического поля
const c1 = new Counter(); // создание экземпляра
    static count: number; // объявление статического поля
class Counter {
Сообщения
Проверить
Показать подсказку

2. Счетчик экземпляров

id: 40707_stat_03_replace

В этом задании вам предстоит реализовать класс, который подсчитывает количество созданных своих экземпляров. Для этого используйте статическое поле, которое увеличивается на единицу при каждом вызове конструктора. Класс должен называться Counter, а статическое поле - instanceCount. Впишите эти имена в указанные пропуски, чтобы код работал корректно.

Заполните пропуски
class input1S {
    static input2S = 0;

    constructor() {
        input1S.input2S++;
    }
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Доступ через экземпляр

id: 40707_stat_04_predict

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

Выберите правильный вариант ответа
class Calculator {
    static add(a: number, b: number): number {
        return a + b;
    }
}

const result = new Calculator().add(5, 3);
console.log(result);
Сообщения
Проверить
Показать подсказку

4. Паттерн Singleton

id: 40707_stat_05_build

Из предложенных строк соберите корректную реализацию паттерна Singleton на TypeScript. Класс должен иметь приватный конструктор, статическое поле для хранения единственного экземпляра и статический метод getInstance, возвращающий этот экземпляр. Игнорируйте лишние строки, которые нарушают принцип Singleton или содержат синтаксические ошибки.

Перетяните в правильном порядке строки из одного блока в другой
class Singleton {
    private static instance: Singleton;
    private constructor() {}
    public static getInstance(): Singleton {
        if (!Singleton.instance) {
            Singleton.instance = new Singleton();
        }
        return Singleton.instance;
    }
}
    public constructor() {}
    private instance: Singleton;
    public static getInstance(): Singleton { return new Singleton(); }
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Static vs Instance

id: 40707_stat_06_compare

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

Сопоставьте строки в правой(нижней) части с соответствующими строками в левой(верхней) по порядковому номеру
Доступ через this
Доступ через ClassName
Принадлежит объекту
Общий для всех
Instance member
Static
Static member
Instance
Сообщения
Проверить
Показать подсказку

6. Ошибка контекста

id: 40707_stat_07_error

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

Найдите ошибку и исправьте
class Settings {
    private props: Map<string, any> = new Map();
 
    static getProp(key: string): any {
        return this.props.get(key);
    }
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

7. Модификаторы

id: 40707_stat_08_fill

В данном фрагменте кода TypeScript необходимо правильно расставить модификаторы доступа и ключевое слово `static` для поля `count` и метода `increment` класса `Counter`. Поле `count` должно быть приватным и статическим, а метод `increment` — публичным и статическим. Выберите для каждого пропуска подходящий вариант из выпадающего списка, чтобы код корректно компилировался и работал.

Нужно правильно расставить в пропуски предложенные варианты
class Counter {
  input1S input2S count = 0;

  input3S input4S increment() {
    return ++Counter.count;
  }
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

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

id: 40707_compiler

Погрузитесь в мир статических элементов классов! В этом примере мы создаем систему управления подключениями, где `static` свойства позволяют отслеживать общее состояние всех объектов сразу. Попробуйте изменить код: добавьте метод `disconnect()`, который будет уменьшать счетчик `activeConnections`, или попытайтесь вызвать статический метод через экземпляр `conn1` — посмотрите, как TypeScript защитит вас от ошибок. Экспериментируйте с логикой, добавляйте свои статические константы и наблюдайте, как класс превращается в мощный инструмент управления данными.

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