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