TypeScript中interface和type的區別
阿新 • • 發佈:2020-09-17
TypeScript中interface和type的區別
ts中定義型別的兩種方式
- 介面(interface)
- 類型別名(type alias)
interface只能定義物件型別
type宣告的方式可以定義組合型別、交叉型別和原始型別
相同點
1. 都可以描述一個物件或者函式
interface
interface User { name: string; age: number; } interface SetUser { (name: string, age: number): void; }
type
type User = { name: string; age: number } type SetUser= (name: string, age: number): void;
2. 都允許拓展(extends)
interface和type都可以拓展,並且兩者並不是互相獨立的,也就是說interface可以extends type, type也可以extends interface. 雖然效果差不多,但是語法不同。
interface extends interface
interface Name {
name: string;
}
interface User extends Name {
age: number;
}
type extends type
type Name = { name: string; } type User= Name & { age: number }
interface extends type
type Name = {
name: string;
}
interface User extends Name {
age: number;
}
type extends interface
interface Name { name: string; } type User = Name & { age: number; }
不同點
1. type可以宣告基本類型別名、聯合型別、元祖等型別
// 基本類型別名 type Name = string;// 聯合型別 interface Dog { wong() } interface Cat { miao(); } type Pet = Dog | Cat; // 具體定義陣列每個位置的型別 type PetList = [Dog, Pet];
2. type語句中還可以使用typeof獲取例項的型別進行賦值
// 當你想要獲取一個變數的型別時,使用typeof let div = document.createElement('div'); type B = typeof div;
3. type其他騷操作
type StringOrNumber = string | number; type Text = string | { text: string }; type NameLookup = Dictionary<string, Person>; type Callback<T> = (data: T) => void; type Pair<T> = [T, T]; type Coordinates = Pair<number>; type Tree<T> = T | { left: Tree<T>, right: Tree<T> };
4. interface能夠宣告合併
interface User {
name: string;
age: number;
}
interface User {
sex: string;
}
User介面為:
{
name: string;
age: number;
sex: string;
}
參考: