TypeScript中type和interface区别

news2024/9/27 17:27:54

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 }