问答题1141/1593Typescript中 interface 和 type 的差别是什么?

难度:
2021-07-08 创建

参考答案:

相同点

  • 都可以描述一个对象或者函数

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;
  • 都允许拓展(extends)

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 可以而 interface 不行

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 可以而 type 不行

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

赞赏支持

预览

题库维护不易,您的支持就是我们最大的动力!