• StackOverflow 上的討論鏈接

• Interface vs Type alias in TypeScript 2.7

• Differences Between Type Aliases and Interfaces

• Types vs. interfaces in TypeScript

interface X {a: numberb: string }type X = {a: numberb: string };

我們可以用 interface 去 extend type：

用 class 實現 type：

用 class 實現 type 和 interface 的混合：

type intersection 的用法，使用 & 連接多個 type：

使用 partial 將部分 type 的字段變成 optional：

Hybrid Types with both type alias and interface

您可能偶爾想要定義一個對象，它既充當函數又充當對象，并具有附加屬性。

我們在這里談論的是為函數（可調用對象）和該函數的靜態屬性定義類型。

看個例子：

interface Counter {// callable part(start: number): string// static propertiesinterval: numberreset(): void}const getCounter = () => {const counter = ((start:number) => {}) as Countercounter.interval = 123counter.reset = () => {}return counter}const callable = getCounter();callable(10);callable.reset();callable.interval = 5;

用 interface 定義了一個 Counter， 該類型兼有 callable 和靜態屬性兩種特征。

最佳實踐：還是分開定義吧。

callable 的定義：

靜態屬性的定義：

最后的 counter 類型：

類型與類型之間連接用 &，接口的組合用 extends.

In TypeScript, we have a lot of basic types, such as string, boolean, and number. These are the basic types of TypeScript. You can check the list of all the basic types here. Also, in TypeScript, we have advanced types and in these advanced types, we have something called type aliases. With type aliases, we can create a new name for a type but we don’t define a new type.

所以我們使用的 type 關鍵字，定義的只是類型別名，而不是全新的類型。

We use the type keyword to create a new type alias, that’s why some people might get confused and think that it’s creating a new type when they’re only creating a new name for a type. So, when you hear someone talking about the differences between types and interfaces, like in this article, you can assume that this person is talking about type aliases vs interfaces.

區別

在最新版本的 TypeScript 里，二者的區別越來越小。

• Interfaces are basically a way to describe data shapes, for example, an object.

• Type is a definition of a type of data, for example, a union, primitive, intersection, tuple, or any other type.

interface 支持 declaration merging，而 type alias 不支持。

interface Song {artistName: string; };interface Song {songName: string; };const song: Song = {artistName: "Freddie",songName: "The Chain" };

TypeScript will automatically merge both interfaces declarations into one, so when we use this Song interface, we’ll have both properties.

而 type alias 不支持，會遇到編譯錯誤：

Extends and implements

In TypeScript, we can easily extend and implement interfaces. This is not possible with types though.

Interfaces in TypeScript can extend classes, this is a very awesome concept that helps a lot in a more object-oriented way of programming. We can also create classes implementing interfaces.

例子：

class Car {printCar = () => {console.log("this is my car")} };interface NewCar extends Car {name: string; };class NewestCar implements NewCar {name: "Car";constructor(engine:string) {this.name = engine}printCar = () => {console.log("this is my car")} };

這里接口擴展了原始類，一個新的類又實現了接口。

元祖 Tuples

元組是 TypeScript 中一個非常有用的概念，它為我們帶來了這種新的數據類型，它包括兩組不同數據類型的值。

無法用 interface 定義元祖，但 interface 內部屬性可以用元祖作為數據類型。

interface Response {value: [string, number] }

什么時候用 interface，什么時候用 type alias？

當您需要定義新對象或對象的方法時，接口會更好。 例如，在 React 應用程序中，當您需要定義特定組件將要接收的 props 時，最好使用接口而不是類型：

interface TodoProps {name: string;isCompleted: boolean };const Todo: React.FC<TodoProps> = ({ name, isCompleted }) => {... };

例如，當您需要創建函數時，類型會更好。 假設我們有一個函數將返回一個被調用的對象，這種方法更推薦使用類型別名：

type Person = {name: string,age: number };type ReturnPerson = (person: Person ) => Person;const returnPerson: ReturnPerson = (person) => {return person; };

接口與對象和方法對象更好地工作，類型更好地與函數、復雜類型等一起工作。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的TypeScript 里 interface 和 type 的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。