4

Интерфейс:

interface test {
    name: string;
}

Тип:

type test2 = {
    name: string,
}

Перечень задач:

1)Для создания переменной:

let test: test2 = {name: "test"};

2)Для создания объекта с экспортом:

const test = {
  name: "test",
}

export type {test};
export {test};

3)Для функций/классов.

Что использовать для этих пунктов, интерфейс или тип?

1
  • 4
    Вечером напишу подробный ответ
    – Randall
    17 сен 2021 в 12:08

1 ответ 1

7

Вам нужно знать различие между типом и интерфейсом, чтобы уметь правильно выбрать и использовать.

Книга - Эффективный TypeScript: 62 способа улучшить код.

Стр. 76

ПРАВИЛО 13. Знайте разницу между type и interface

Если вы хотите определить именованный тип в TypeScript, то у вас есть два варианта:

type TState = {  
    name: string;  
    capital: string;
}

Или интерфейс:

interface IState {  
    name: string;  
    capital: string;
}

(Также можно использовать class, но он относится к понятиям среды выполнения JavaScript и тоже вводит значение.

Что же вам следует использовать, type или interface? Граница между этими вариантами с течением времени размылась настолько, что в некоторых ситуациях можно использовать и то и другое. Обратите внимание на оставшиеся различия между ними и следуйте постоянству применения того или другого в конкретных ситуациях. Еще вам нужно знать, как прописать один и тот же тип при помощи любого из этих способов. Это поможет легче воспринимать код TypeScript, использующий их.

Сперва рассмотрим сходства: типы State, указанные выше, являются практически неотличимыми друг от друга. Если вы определите значение IState либо TState с дополнительным свойством, то ошибки в результате будут идентичными:

const wyoming: TState = {  
    name: 'Wyoming',  
    capital: 'Cheyenne',  
    population: 500_000
    // ~~~~~~~ Тип не может быть назначен для типа 'TState'.
    //         литерал может определять только известные
    //         свойства, а 'population' не существует в типе 
    //         'TState'.
};

Вы можете использовать сигнатуру индекса и для interface, и для type:

type TDict = { 
    [key: string]: string 
};

interface IDict {  
    [key: string]: string;
}

Также можно определить типы функций в обоих случаях:

type TFn = (x: number) => string; 

interface IFn {  
    (x: number): string;
}

const toStrT: TFn = x => '' + x; // ok
const toStrI: IFn = x => '' + x; // ok

Псевдоним типа выглядит более естественно для этого простейшего типа функции, но если тип будет иметь еще и свойства, тогда декларация будет выглядеть иначе:

type TFnWithProperties = {  
    (x: number): number;  
    prop: string;
}

interface IFnWithProperties {  
     (x: number): number;  
     prop: string;
}

Этот синтаксис легче запомнить, зная, что в JavaScript функции являются вызываемыми объектами.И псевдонимы типов, и интерфейсы могут быть обобщенными:

type TPair<T> = {  
    first: T;  
    second: T;
}

interface IPair<T> {  
    first: T;  
    second: T;
}

interface может расширять type (с некоторыми оговорками, упомянутыми ниже) и наоборот:

interface IStateWithPop extends TState {  
    population: number;
}
type TStateWithPop = IState & { population: number; };

Снова типы оказались идентичными. Оговорка заключается в том, что interface не может расширять сложные типы вроде типов объединений. Если вам нужно именно это, придется использовать type и &. Класс может реализовывать как interface, так и простой тип:

class StateT implements TState {  
    name: string = '';  
    capital: string = '';
}

class StateI implements IState {  
    name: string = '';  
    capital: string = '';
}

Так в чем же отличия? Одно вы уже видели: существуют типы объединения, но не существует интерфейсов объединения:

type AorB = 'a' | 'b';

Расширение типов объединений может быть весьма полезно. Если у вас есть раздельные типы для переменных Input и Output и отображения из имени в переменную:

type Input = { /* ... */ };
type Output = { /* ... */ };

interface VariableMap {  
    [name: string]: Input | Output;
}

тогда может понадобиться тип, приписывающий переменной имя. Например:

type NamedVariable = (Input | Output) & { name: string };

Этот тип не может быть выражен через interface. В целом Type имеет больше возможностей, чем interface. Он может выступать в качестве объединения, а также пользоваться более продвинутыми возможностями вроде отображения или условных типов.Помимо этого, он может более ясно выражать кортежи и типы массивов:

type Pair = [number, number];
type StringList = string[];
type NamedNums = [string, ...number[]];

Вы можете выразить что-либо подобное кортежу, используя interface:

interface Tuple {  0: number;  1: number;  length: 2;}
const t: Tuple = [10, 20]; // ok

Но это неудобно и отбрасывает методы кортежа, такие как concat. Лучше использовать type.Тем не менее у interface есть некоторые возможности, отсутствующие у type. Одна из них — это то, что interface может быть дополнен. Возвращаясь к примеру со State, вы могли бы добавить поле population другим способом:

interface IState {  
    name: string;  
    capital: string; 
}

interface IState {  
    population: number;
}

const wyoming: IState = {  
    name: 'Wyoming',  
    capital: 'Cheyenne',  
    population: 500_000
}; // ok

Это называется объединением деклараций. Вы наверняка встречали его ранее. Главным образом оно используется с файлами деклараций типов. Для его поддержки уместно использовать interface, поскольку в декларациях типов могут быть пропуски, которые должны заполнять пользователи. TypeScript использует слияние, чтобы получать разные типы для разных версий стандартной библиотеки JavaScript. Интерфейс Array, к примеру, определен в lib.es5.d.ts. По умолчанию — это все, что вы получаете. Однако если вы добавите ES2015 к записи lib вашего tsconfig.json, то TypeScript также включит lib.es2015.d.ts. Это добавляет (посредством слияния) еще один интерфейс Array с дополнительными методами вроде find, характерными для ES2015.

В итоге вы получаете общий тип Array, богатый методами. Слияние поддерживается в обычном коде так же, как декларации. Если же вам важно, чтобы никто не мог в дальнейшем дополнять тип, то используйте type. Вернемся к вопросу выбора между type и interface. Для сложных типов выбора у вас нет: необходимо использовать псевдоним типа. Но что насчет более простых типов объектов, которые могут быть представлены и другим путем? Чтобы ответить на этот вопрос, вам следует учитывать согласованность и возможное дополнение. Если вы работаете с кодом, который постоянно использует interface, то придерживайтесь interface. Если же в нем применяется type, используйте type.В проектах, не имеющих установленного стиля, вам следует поразмыслить над возможностью дополнения. Если вы опубликуете декларации типов для API, пользователям будет удобно вставлять новые поля через interface при изменении API. Однако для типа, который используется внутри проекта, слияние деклараций может оказаться ошибкой, поэтому отдайте предпочтение type.


Также советую прочитать:

Книга - Профессиональный TypeScript. Разработка масштабируемых JavaScript-приложений

Cтр 119. Глава - Интерфейсы

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

Книга - TypeScript быстро

Cтр. 56 Глава - Базовые и пользовательские типы

Описывает различие между классом, типом и интерфейсом.

4
  • 2
    очень хороший ответ. Lasna, рекомендации в конце ответа оставляют простор для задумчивости и колебаний, так что я упрощу до императива: всё что описывается как интерфейс - интерфейс, всё остальное (пересечения, объединения, pick, omit, keyof Enum и т.п.) - типы. кажется сейчас все так делают 17 сен 2021 в 19:18
  • nörbörnën, А если мне необходимо объявить объект с константами, или, скажем... объект с учетными данными для подключения к базе данных. Это "тип", верно?
    – Lasna
    20 сен 2021 в 7:34
  • @Lasna1 объект с константами это - 'as const'. а вот для манипуляций с ним пригодится type. пример. объект с настройками подключения db, это - 1) интерфейс для описания такого объекта 2) сам объект 20 сен 2021 в 15:32
  • 1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.