参考答案:
interface
1interface User { 2 name: string 3 age: number 4} 5 6interface SetUser { 7 (name: string, age: number): void; 8}
type
1type User = { 2 name: string 3 age: number 4}; 5 6type SetUser = (name: string, age: number)=> void;
interface 和 type 都可以拓展,并且两者并不是相互独立的,也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多,但是两者语法不同。
interface extends interface
1interface Name { 2 name: string; 3} 4interface User extends Name { 5 age: number; 6}
type extends type
1type Name = { 2 name: string; 3} 4type User = Name & { age: number };
interface extends type
1type Name = { 2 name: string; 3} 4interface User extends Name { 5 age: number; 6}
type extends interface
1interface Name { 2 name: string; 3} 4type User = Name & { 5 age: number; 6}
type 可以声明基本类型别名,联合类型,元组等类型
1// 基本类型别名 2type Name = string 3 4// 联合类型 5interface Dog { 6 wong(); 7} 8interface Cat { 9 miao(); 10} 11 12type Pet = Dog | Cat 13 14// 具体定义数组每个位置的类型 15type PetList = [Dog, Pet]
type 语句中还可以使用 typeof 获取实例的 类型进行赋值
1// 当你想获取一个变量的类型时,使用 typeof 2let div = document.createElement('div'); 3type B = typeof div
其他骚操作
1type StringOrNumber = string | number; 2type Text = string | { text: string }; 3type NameLookup = Dictionary<string, Person>; 4type Callback<T> = (data: T) => void; 5type Pair<T> = [T, T]; 6type Coordinates = Pair<number>; 7type Tree<T> = T | { left: Tree<T>, right: Tree<T> };
interface 能够声明合并
1interface User { 2 name: string 3 age: number 4} 5 6interface User { 7 sex: string 8} 9 10/* 11User 接口为 { 12 name: string 13 age: number 14 sex: string 15} 16*/
一般来说,如果不清楚什么时候用interface/type,能用 interface 实现,就用 interface , 如果不能就用 type 。
最近更新时间:2024-08-10