Typescript中interface和type的区别

Typescript中interface和type的区别

通过分析interface和type的相同点和区别，对如何使用它们有更好的了解。

相同点

1. 都可以用来描述对象或者函数。
2. 都可以实现继承。

不同点

1. 写法

• interface定义对象和函数的写法

//定义对象
interface Person {
  name:string;
  age:number;
}

//定义函数
interface SetPerson {
  (name:string,age:number): void;
}

• type定义对象和函数的写法

//定义对象
type Person = {
  name:string;
  age:number;
}

//定义函数
type SetPerson = (name:string,age:number): void;

2. 继承方式

• interface通过extends继承interface的类型

interface Person {
  name:string;
  age:number;
}

interface Student extends Person {
  sex:string
}

• type通过&继承type的类型

type Person = {
  name:string;
  age:number;
}

type Student = Person & {
  sex:string
}

• 两者定义的类型也可以互相继承

type Person = {
  name:string;
  age:number;
}
//interface 继承 type
interface Student extends Person {
  sex:string
}

interface Person {
  name:string;
  age:number;
}
//type 继承 interface
type Student = Person & {
  sex:string
}

3. type可以， interface不行

• type可以定义基本类型

type Name = string;
type Age = number;

• type可以声明联合类型

type Student = { name:string } | { setName(name:string):void }

• type声明元组类型

type Data = [string, number]

• type定义的类型别名不可重复,重复会报错

type Person = { name: string };
type Person = { age: number }; //Duplicate identifier 'Person'

4. type不行，interface可以

• interface可以联合声明

interface Person {
  name:string;
}

interface Person {
  age:number
}

总结：官方推荐能用interface就用interface，interface不能满足条件就用type。其实各自都有各自的特点，只要项目中能够做到规范统一就好。