首页 > 其他分享> 文章详细

TS中interface和type的区别

2022-03-21 19:36:45 阅读：198 来源： 互联网

标签：string TS number Person 类型 interface type

一,概念:

1.接口(Interface)

接口主要用于类型检查，它只是一个结构契约，定义了具有相似的名称和类型的对象结构。除此之外，接口还可以定义方法和事件。

2.类型别名(Type Alias)

不同于interface只能定义对象类型，type声明还可以定义基础类型、联合类型或交叉类型。

二,差异点:

1.定义类型范围

interface只能定义对象类型, 而type声明可以声明任何类型，包括基础类型、联合类型或交叉类型。

// 基本类型 
type person = string

// 联合类型
interface Dog {
 name: string;
}
interface Cat {
 age: number;
}
type animal = Dog | Cat

// 元组类型
interface Dog { 
name: string;
}
interface Cat { 
age: number;
}
type animal = [Dog, Cat]

2.扩展性

接口可以extends、implements,从而扩展多个接口或类。类型没有扩展功能。

// interface extends interface
interface Person {
  name: string
}
interface User extends Person {
  age: number
}

// interface extends type
type Person = {
  name: string
}
interface User extends Person {
  age: number
}

type可以使用交叉类型&，来使成员类型合并

// type & type
type Person = {
   name: string
}
type User = Person & { age: number }

// type & interface
interface Person {
  name: string
}
type User = {age: number} & Person

3.合并声明

定义两个相同名称的接口会合并声明。

定义两个同名的type会出现异常。

interface Person { 
  name: string
}
interface Person {
  age: number
}
// 合并为:interface Person { name: string age: number}

4.typeof

type可以使用typeof获取实例类型

let div = document.createElement('div');
type B = typeof div

标签：string,TS,number,Person,类型,interface,type
来源： https://www.cnblogs.com/cuijinlin/p/16036101.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9