首页 前端知识 TypeScript中type和interface区别

TypeScript中type和interface区别

2024-06-05 13:06:46 前端知识 前端哥 785 728 我要收藏

typescript中interface介绍:TypeScript 中的接口 interface_疆~的博客-CSDN博客通常使用接口(Interface)来定义对象的类型。https://blog.csdn.net/qq_40323256/article/details/128478749

type

type关键字是声明类型别名的关键字。用来给一个类型起新名字,使用 type 创建类型别名。类型别名不仅可以用来表示基本类型,还可以用来表示对象类型、联合类型、元组和交集。它的语法如下:

type AliasName = Type;
  • type:声明类型别名的关键字
  • AliasName:类型别名的名称
  • Type:类型别名关联的具体类型

 

type MyNumber = number //基本类型
type StringOrNumber = string | number //联合类型
type Text1 = string | string[] //联合类型
type Point = [number, string] //元组
type Callback = (data: string) => void //函数类型
// 对象类型
type Person = {
  age: number;
  gender: string;
  isWebDev: boolean;

  id: MyNumber; // 可以使用定义类型
  name: StringOrNumber;
};
// 范型
type Tree<T> = { value: T };

 多个type情况:

type TPerson1 = {
  name: string
}
type TPerson2 = {
  age: number
}
type TPerson = TPerson1 & TPerson2

let u: TPerson = { name: '张三', age: 23 }

 

相同点

都可以用来定义 对象 或者 函数 的结构,而严谨的来说,type 是引用,而 interface是定义 

1、都可以用来定义对象和函数

type:

type TPosition = {
  x: number;
  y: number;
};

type TSetPosition = (x: number, y: number) => void;

 interface:

interface IPosition {
  x: number;
  y: number;
}

interface ISetPosition {
  (x: number, y: number): void;
}

 2、都可以实现继承

type 可以继承 interface,interface也可以继承type,只是在实现形式上,稍微有些区别。

对于 interface 来说,继承是通过 extends 实现的;而 type 是通过 & 来实现的,也可以叫做交叉类型。 

type:

// type 继承 type
type TPerson = {
  name: string
}

type Student = TPerson & { stuId: number }

// type 继承 interface
interface IPerson {
  name: string
}

type Student2 = IPerson & { stuId: number }

 interface:

// interface 继承 interface
interface IPerson {
  name: string
}

interface IStudent extends IPerson { stuId: number }

// interface 继承 type
type TPerson = {
  name: string
}

interface IStudent extends TPerson { stuId: number }

 不同点:

  • type 在声明类型别名之后实际上是一个赋值操作,它需要将别名与类型关联起来。也就是说类型别名不会创建出一种新的类型,它只是给已有类型命名并直接进行引用。interface定义了一个接口类型。
  • type 能够表示非对象类型, 而 interface 则只能表示对象类型

 

1、type 可以做到而 interface 不能做到

type 可以声明基本类型、联合类型、元组类型

type MyNumber = number //基本类型
type StringOrNumber = string | number //联合类型
type Text1 = string | string[] //联合类型
type Point = [number, string] //元组

2、interface 可以做到而 type 不能做到

interface 可以声明合并。而 type 的话,就会报重复定义的警告,因此type是无法实现声明合并

// interface 可以声明合并
interface IPerson {
  name: string
}
interface IPerson {
  age: number
}
let p: IPerson = { name: '张三', age: 23 }

// type 不可以声明合并
type TPerson = {
  name: string
}
type TPerson = {
  age: number
}
let u: TPerson = { name: '张三', age: 23 }

 

 

 总结

对于 type来说,更多的是对类型的一种复用,比如在项目中需要用到一些比较复杂的或者书写起来很长的类型,我们可以使用 type来直接引用该类型:

type FType = boolean | string | number;

而对于 interface来说,它是正儿八经的用来定义接口类型(约束数类型和属性)的,且接口类型是支持继承和声明合并的。

所以在对于对象结构的类型定义上,建议尽可能的使用 interface,而在合适的场景使用 type
一些使用场景
1、使用type的场景:

  • 定义基本类型的别名时,使用 type
  • 定义元组类型时,使用 type
  • 定义函数类型时,使用 type
  • 定义联合类型时,使用 type
  • 定义映射类型时,使用 type

2、使用interface的场景:

  • 需要利用接口自定合并特性的时候,使用 interface
  • 定义对象类型且无需使用 type 的时候,使用 interface
     
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10869.html
标签
评论
发布的文章

基于Vue2的ofd文件预览

2024-06-10 11:06:28

网页快速置灰效果

2024-06-10 11:06:17

HTML5 CSS——Day6

2024-06-10 11:06:11

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!