В чем разница между
Когда я работал над проектом Typescript, некоторые разработчики использовали interfaces, а другие — types. Тем не менее я пытался использовать интерфейсы и типы. Первое время я растерялся, потому что они очень похожи. Итак, что я должен использовать интерфейсы или типы?
Если вы запутались или не знаете, в чем разница, давайте поговорим о лучших практиках в разных случаях.
Типы против интерфейсов
Прежде чем мы начнем, давайте посмотрим, что такое интерфейс и тип.
Интерфейс — это полезный инструмент на этапе разработки, который действует как контракт в вашем приложении или синтаксис, которому должны следовать классы. Интерфейс также известен как утиная печать или подтипирование. Если вам интересно, вы можете прочитать больше в другой моей статье Когда и как использовать интерфейсы и классы в TypeScript.
Типы или псевдонимы типов — это что-то вроде интерфейса, создающего новое имя для любого типа. Обратите внимание, он не определяет новый тип.
Далее я собираюсь использовать Игровую площадку Typescript для кодирования, а не создавать новый проект. Давайте сравним, как мы можем использовать типы и интерфейсы с разными типами.
примитивы
Примитивы могут использоваться только types.
type AppName = string type AppType = string type AppSize = number
Мы не можем создать их через interfaces. Итак, это первое различие между ними.
Союзы
Союзы — это переменная, которая может хранить несколько типов значений. Мы можем создавать союзы через types.
// AppName - string or undefined type AppName = string | undefined type AppType = 'mobile' | 'web' | 'desktop' type AppSize = number | bigint
Кроме того, мы можем создать новый союз Employee двумя типами:
type Developer = {
devName: string
}
type Tester = {
testerName: string
}
type Employee = Developer | Tester
Давайте определим тип, который объединяет два интерфейса:
interface Developer {
devName: string
}
interface Tester {
testerName: string
}
type Employee = Developer | Tester
Интерфейс не поддерживает объединения.
Типы кортежей
Кортежи — это пара элементов с разным типом значений.
type App = [name: string, type: 'mobile' | 'web' | 'desktop']
Мы можем объявить кортеж, используя interface. Но непонятно по сравнению с type. Я предпочитаю использовать типы.
interface AppInfo {
value: [name: string, type: 'mobile' | 'web' | 'desktop']
}
Функции
Мы можем определить функции, используя types и interfaces:
type runApp = () => void
Однако использование interface кажется сложным:
interface runApp {
(): void
}
Слияние деклараций
Слияние объявлений — это когда TypeScript компилирует и объединяет два или более интерфейса с одинаковыми именами в одно объявление. Давайте определим два интерфейса App:
interface App {
name: string
}
interface App {
type: 'mobile' | 'web' | 'desktop'
}
// TypeScript will automatically merge both App declarations into one
const app: App = {
name: 'facebook',
type: 'mobile'
}
Если мы попытаемся объявить два типа App via, это выдаст ошибку. Потому что это не работает с types.
// error - Duplicate identifier 'App'.
type App {
name: string
}
// error - Duplicate identifier 'App'.
type App {
type: 'mobile' | 'web' | 'desktop'
}
Перекресток
Пересечение объединяет несколько типов в один тип с помощью ключевого слова &.
interface Developer {
devName: string
}
interface Tester {
testerName: string
}
type Employee = Developer & Tester
Но он не объединяет несколько типов в один интерфейс.
Наследование
Наследование — это возможность наследовать атрибуты и методы от родителя. Этого можно добиться только с помощью interfaces. Это невозможно с types.
interface Developer {
devName: string
}
interface Tester {
testerName: string
}
interface Employee extends Developer, Tester {}
class User implements Employee {
devName = "Dev Name"
testerName = "Tester Name"
}
Заключение
В этой статье мы обсудили основные различия между типами и интерфейсами. Они очень похожи, но то, что вы должны использовать, зависит от вашего варианта использования.
Спасибо за прочтение — надеюсь, эта статья оказалась вам полезной. Удачного кодирования!
