Классы и интерфейсы в TypeScript

Valery Semenenko
Jun 27, 2018 · 6 min read
Todd Motto: Classes vs Interfaces in TypeScript

Использование классов

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

class PizzaMaker {
static create(event: { name: string; toppings: string[] }) {
return { name: event.name, toppings: event.toppings };
}
}
const pizza = PizzaMaker.create({
name: 'Inferno',
toppings: ['cheese', 'peppers'],
});
console.log(pizza);
// Output: { name: 'Inferno', toppings: [ 'cheese', 'peppers' ] }
class PizzaMaker {
create(event: { name: string; toppings: string[] }) {
return { name: event.name, toppings: event.toppings };
}
}
const pizzaMaker = new PizzaMaker();const pizza = pizzaMaker.create({
name: 'Inferno',
toppings: ['cheese', 'peppers'],
});
console.log(pizza);
// Output: { name: 'Inferno', toppings: [ 'cheese', 'peppers' ] }
class Pizza {
constructor(
public name: string,
public toppings: string[]
) {}
}
const pizza = new Pizza('Inferno', ['cheese', 'peppers']);

console.log(pizza);
// Output: Pizza { name: 'Inferno', toppings: [ 'cheese', 'peppers' ] }
class Pizza {
constructor(
public name: string,
public toppings: string[]
) {}
}

class PizzaMaker {
static create(event: Pizza) {
return {
name: event.name,
toppings: event.toppings
};
}
}

Использование интерфейса

В отличие от классов, interface представляет собой виртуальную структуру, которая существует только в контексте TypeScript. Компилятор TypeScript использует интерфейсы исключительно для целей проверки типов свойств. Как только TypeScript-код будет преобразован в JavaScript-код, последний будет очищен от интерфейсов — в JavaScript нет интерфейсов, поэтому для них там нет места.

interface Pizza {
name: string;
toppings: string[];
}
class PizzaMaker {
static create(event: Pizza) {
return {
name: event.name,
toppings: event.toppings
};
}
}

Сравнение использования класса и интерфейса

Как уже упоминалось ранее, текущий код обеспечивает проверку типов свойств для Pizza, но не может создать пиццу:

interface Pizza {
name: string;
toppings: string[];
}
class PizzaMaker {
static create(event: Pizza) {
return {
name: event.name,
toppings: event.toppings
};
}
}
class Pizza {
constructor(
public name: string,
public toppings: string[]
) {};
}
class PizzaMaker {
static create(event: Pizza) {
return new Pizza(
event.name,
event.toppings
);
}
}
const pizza = PizzaMaker.create({
name: 'Inferno',
toppings: ['cheese', 'peppers']
});

Заключение

Мы многому научились, не погружаясь в большое количество кода. Обобщить в двух словах — если необходимо создать экземпляр объекта, при этом получив преимущества проверки типов таких сущностей как аргументы, возвращаемые типы или generics — имеет смысл использовать класс.


devSchacht

Подкаст. Переводы. Веб-разработка.

Valery Semenenko

Written by

Hobby Coder. Like Vue.js, Angular and JavaScript

devSchacht

Подкаст. Переводы. Веб-разработка.