Реализация интерфейсов (implements)

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

Тренажер по TypeScript

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

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

Важно помнить: интерфейс описывает только структуру (сигнатуры методов), но не их реализацию (код внутри {}). Если класс не соблюдает контракт (например, пропустил метод), TypeScript выдаст ошибку компиляции. В этом уроке мы научимся связывать классы с интерфейсами и правильно типизировать методы.

Список тем

1. Синтаксис реализации

id: 40705_ts_impl_replace_keyword

В этом задании вам нужно связать класс User с интерфейсом IUser, используя ключевое слово, которое указывает, что класс реализует данный интерфейс. Класс User должен содержать поля name и age, а также метод greet(), который возвращает приветствие. Ваша задача — дополнить объявление класса, чтобы он корректно реализовывал интерфейс IUser. Обратите внимание на синтаксис TypeScript для реализации интерфейсов.

Заполните пропуски
interface IUser {
  name: string;
  age: number;
  greet(): string;
}

class User input1S IUser {
  name: string;
  age: number;

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

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

const user = new User('Alice', 30);
console.log(user.greet());
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Невыполненный контракт

id: 40705_ts_impl_error_missing_method

В этом фрагменте TypeScript-кода класс ConsoleLogger должен реализовывать интерфейс Logger, который требует наличие метода log. Однако в классе метод назван иначе, из-за чего контракт интерфейса не выполняется. Найдите и исправьте ошибку в названии метода, чтобы код успешно компилировался и соответствовал интерфейсу.

Найдите ошибку и исправьте
interface Logger {
    log(message: string): void;
}
 
class ConsoleLogger implements Logger {
    print(message: string): void {
        console.log(message);
    }
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Сборка класса

id: 40705_ts_impl_build_class_structure

Из предложенных строк соберите корректную TypeScript-программу, которая определяет интерфейс Animal с методом move() и реализует его в классе Dog. Класс Dog должен содержать метод move(), выводящий в консоль строку 'Run'. Одна из строк лишняя и в решение входить не должна. Обратите внимание на правильную структуру: объявление интерфейса, затем объявление класса с ключевым словом implements, определение метода и закрывающие фигурные скобки.

Перетяните в правильном порядке строки из одного блока в другой
interface Animal {
  move(): void;
}
class Dog implements Animal {
  move() {
    console.log("Run");
  }
}
class Cat {
  meow() {
    console.log("Meow");
  }
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Типизация метода

id: 40705_ts_impl_select_return_type

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

Нужно правильно расставить в пропуски предложенные варианты
interface Greeter {
  greet(): string;
}

class Person implements Greeter {
  greet()input1S {
    return "Hello!";
  }
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Интерфейс vs Класс

id: 40705_ts_impl_compare_def_vs_impl

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

Сопоставьте строки в правой(нижней) части с соответствующими строками в левой(верхней) по порядковому номеру
login(): void;
username: string;
setPassword(pwd: string): void;
readonly id: number;
username: string;
readonly id: number;
login() { console.log("Logging in..."); }
setPassword(pwd: string) { this.password = pwd; }
Сообщения
Проверить
Показать подсказку

6. Обязательные свойства

id: 40705_ts_impl_click_required_props

Внимательно изучите код на TypeScript. Дан интерфейс User и класс Student, который его реализует. Отметьте в классе Student только те свойства, которые объявлены в интерфейсе User и, следовательно, являются обязательными для реализации. Не отмечайте свойства, которых нет в интерфейсе, а также методы и другие элементы класса.

Кликните по всем фрагментам, которые подходят под условие задания.
interface User {
    name: string;
    age: number;
    email: string;
}

class Student implements User {
    {{name: string;~|~t1}}
    {{age: number;~|~t2}}
    {{email: string;~|~t3}}
    {{studentId: number;~|~t4}}
    {{course: string;~|~t5}}
    
    constructor(name: string, age: number, email: string) {
        this.name = name;
        this.age = age;
        this.email = email;
    }
    
    getDetails(): string {
        return `${this.name}, ${this.age}`;
    }
}
Сообщения
Проверить
Показать подсказку

7. Проверка компиляции

id: 40705_ts_impl_predict_compilation

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

Выберите правильный вариант ответа
interface Person {
  name: string;
  age: number;
}

class Employee implements Person {
  name: number;
  age: number;

  constructor(name: number, age: number) {
    this.name = name;
    this.age = age;
  }
}
Сообщения
Проверить
Показать подсказку

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

id: 40705_compiler

Узнайте, как интерфейсы служат «контрактом» для классов, гарантируя наличие определенных свойств и методов. В этом примере классы Movie и MusicTrack реализуют общий интерфейс: попробуйте добавить новый класс, например Podcast, и посмотрите, что произойдет, если вы забудете реализовать в нем метод play(). Добавляйте свои свойства в интерфейс, меняйте логику методов и попробуйте передать разные объекты в общую функцию, чтобы увидеть силу полиморфизма в действии!

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