TypeScript 中，type 和 interface 定义自定义类型的区别

在 TypeScript 中，type 和 interface 都用于定义自定义类型，但它们有一些不同之处。主要区别在于以下几点：

  1. 语法差异：

    • type：使用 type 关键字来定义类型别名，语法相对简洁，适合用于定义具体的类型结构或组合现有类型。
    • interface：使用 interface 关键字来定义接口，语法更为正式，可以用于描述对象的形状和结构，以及类之间的契约。

  2. 兼容性：

    • type：可以用来定义任何类型，包括原始类型、联合类型、交叉类型、函数类型、对象类型等。
    • interface：主要用于定义对象类型和类之间的契约，不能用来描述原始类型、联合类型或交叉类型等。

  3. 可扩展性：

    • type：类型别名可以使用联合类型和交叉类型等特性，可以更灵活地组合现有类型，但不能扩展。
    • interface：接口支持扩展，可以通过 extends 关键字来扩展其他接口，从而实现接口的组合和继承。

下面是一个示例代码，演示了 type 和 interface 的用法以及它们之间的区别：

// 使用 type 定义类型别名
type Point = {
  x: number;
  y: number;
};

// 使用 interface 定义接口
interface PointInterface {
  x: number;
  y: number;
}

// 使用 type 定义函数类型
type AddFunction = (x: number, y: number) => number;

// 使用 interface 定义函数类型
interface SubtractFunction {
  (x: number, y: number): number;
}

// 使用 type 组合现有类型
type Name = string;
type Age = number;
type Person = {
  name: Name;
  age: Age;
};

// 使用 interface 组合现有类型
interface PersonInterface {
  name: string;
  age: number;
}

// 使用 interface 继承其他接口
interface Student extends PersonInterface {
  grade: string;
}

// 使用 type 无法继承其他类型
type StudentType = Person & { grade: string };

在这个示例中，Point 和 PointInterface 分别使用 type 和 interface 定义了相同的对象类型。AddFunction 和 SubtractFunction 分别使用 type 和 interface 定义了相同的函数类型。Person 和 PersonInterface 使用 type 和 interface 定义了相同的对象类型，但在 Student 和 StudentType 的定义中，Student 使用 interface 继承了 PersonInterface，而 StudentType 使用 type 则无法继承其他类型。

 

 

*****************************************分隔*********************

在 TypeScript 中，通常可以根据需求和语境来选择使用 `type` 还是 `interface`。下面是一些指导性建议：

### 适合使用 `type` 的场景：

1. **定义复杂类型**：当需要定义复杂的类型结构，包括联合类型、交叉类型、映射类型等时，使用 `type` 更为方便。
2. **创建别名**：当需要为已有的类型创建别名，以提高代码的可读性和可维护性时，使用 `type` 更为适合。
3. **描述函数类型**：当需要描述函数类型，包括参数类型、返回值类型等时，使用 `type` 可以提供更简洁的语法。
4. **类型的计算**：当需要执行类型的计算或转换时，例如使用条件类型（conditional types）或映射类型（mapped types）时，使用 `type` 更为合适。

### 适合使用 `interface` 的场景：

1. **描述对象形状**：当需要描述对象的形状、结构和契约时，特别是在面向对象编程中，使用 `interface` 更为直观。
2. **实现接口继承**：当需要通过继承来扩展和组合接口时，使用 `interface` 提供的继承特性更为便利。
3. **定义类的契约**：当需要定义类的契约，包括属性、方法和行为时，使用 `interface` 更为合适。
4. **编写声明文件**：当需要为第三方库或模块编写声明文件时，通常使用 `interface` 来描述其公共 API。

### 示例代码：

假设我们有一个场景，需要描述一个电子设备的属性，包括名称、价格和型号。同时，我们需要定义一个函数，用于计算电子设备的总价。在这种情况下，我们可以选择使用 `type` 或 `interface`：

```typescript
// 使用 type 定义类型别名
type Electronic = {
name: string;
price: number;
model: string;
};

// 使用 interface 定义接口
interface ElectronicInterface {
name: string;
price: number;
model: string;
}

// 计算电子设备总价的函数
function calculateTotal(electronic: Electronic): number {
return electronic.price;
}

// 使用 type 的电子设备对象
const laptop: Electronic = {
name: "Laptop",
price: 1500,
model: "ABC123",
};

// 使用 interface 的电子设备对象
const smartphone: ElectronicInterface = {
name: "Smartphone",
price: 800,
model: "XYZ456",
};

// 使用函数计算总价
const laptopTotal = calculateTotal(laptop); // 输出：1500
const smartphoneTotal = calculateTotal(smartphone); // 输出：800
```

在这个示例中，`Electronic` 和 `ElectronicInterface` 分别使用 `type` 和 `interface` 定义了相同的电子设备类型。`calculateTotal` 函数接受一个 `Electronic` 类型的参数，计算电子设备的总价。然后我们创建了 `laptop` 和 `smartphone` 两个电子设备对象，并使用函数计算了它们的总价。

 

 

 

// 使用 type 定义联合类型
type StringOrNumber = string | number;

// 使用 interface 定义对象形状
interface Person {
  name: string;
  age: number;
}

// 使用 class 实现 interface
class Student implements Person {
  name: string;
  age: number;
}

// 使用 type 定义交叉类型
type ReadonlyPerson = { readonly [key in keyof Person]: Person[key] };

　　

 

***********************************************分隔**************************************

类型别名 type

首先认识一下什么是类型别名？

类型别名用来给一个类型起个新名字，使用 type 创建类型别名，类型别名不仅可以用来表示基本类型，还可以用来表示对象类型、联合类型、元组和交集。让我们看一些例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
type userName = string; // 基本类型
type userId = string | number; // 联合类型
type arr = number[]; 
// 对象类型
type Person = {
    id: userId; // 可以使用定义类型
    name: userName;
    age: number;
    gender: string;
    isWebDev: boolean;
};
// 范型
type Tree<T> = { value: T };
const user: Person = {
    id: "901",
    name: "椿",
    age: 22,
    gender: "女",
    isWebDev: false,
};
const numbers: arr = [1, 8, 9];

接口 interface

接口是命名数据结构（例如对象）的另一种方式；与type 不同，interface仅限于描述对象类型。

接口的声明语法也不同于类型别名的声明语法。让我们将上面的类型别名 Person 重写为接口声明：

1
2
3
4
5
6
7
interface Person {
    id: userId;
    name: userName;
    age: number;
    gender: string;
    isWebDev: boolean;
}

interface和type的相似之处

在讨论二者区别之前， 首先看一下二者的相似之处（为何开发中，我们觉得用哪个都一样）

都可以描述 Object和Function

两者都可以用来描述对象或函数,但语法不同:

Type

1
2
3
4
5
type Point = {
  x: number;
  y: number;
};
type SetPoint = (x: number, y: number) => void;

Interface

1
2
3
4
5
6
7
interface Point {
  x: number;
  y: number;
}
interface SetPoint {
  (x: number, y: number): void;
}

二者都可以被继承

interface 和 type 都可以继承。

另一个值得注意的是，接口和类型别名并不互斥。类型别名可以继承接口，反之亦然。只是在实现形式上，稍微有些差别。

interface 继承 interface

1
2
3
4
interface Person{
    name:string
}
interface Student extends Person { stuNo: number }

interface 继承 type

1
2
3
4
type Person{
    name:string
}
interface Student extends Person { stuNo: number }

type 继承 type

1
2
3
4
type Person{
    name:string
}
type Student = Person & { stuNo: number }

type 继承 interface

1
2
3
4
interface Person{
    name:string
}
type Student = Person & { stuNo: number }

实现 implements

类可以实现interface 以及 type(除联合类型外)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
interface ICat{
    setName(name:string): void;
}
class Cat implements ICat{
    setName(name:string):void{
        // todo
    }
}
// type 
type ICat = {
    setName(name:string): void;
}
class Cat implements ICat{
    setName(name:string):void{
        // todo
    }
}

上面提到了特殊情况，类无法实现联合类型, 是什么意思呢？

1
2
3
4
5
6
7
8
9
type Person = { name: string; } | { setName(name:string): void };
// 无法对联合类型Person进行实现
// error: A class can only implement an object type or intersection of object types with statically known members.
class Student implements Person {
  name= "张三";
  setName(name:string):void{
        // todo
    }
}

上面聊了interface与 type的相似之处， 接下来就来看看他们的区别。

二者区别

1. 定义基本类型别名

type可以定义基本类型别名, 但是interface无法定义,如：

1
2
3
type userName = string
type stuNo = number
...

2. 声明联合类型

type可以声明联合类型, 例如：

1
type Student = {stuNo: number} | {classId: number}

3. 声明元组

type可以声明 元组类型：

1
type Data = [number, string];

以上都是 type能做到， 而interface做不到的， 接下来聊聊type做不到的

4. 声明合并

如果你多次声明一个同名的接口，TypeScript 会将它们合并到一个声明中，并将它们视为一个接口。这称为声明合并， 例如：

1
2
3
4
5
6
interface Person { name: string }
interface Person { age: number }
let user: Person = {
    name: "Tolu",
    age: 0,
};

这种情况下，如果是type的话，重复使用Person是会报错的：

1
2
3
type Person { name: string }; 
// Error: 标识符“Person”重复。ts(2300)
type Person { age: number }

5. 索引签名问题

如果你经常使用TypeScript, 一定遇到过相似的错误：

Type 'xxx' is not assignable to type 'yyy'

Index signature is missing in type 'xxx'.

看个例子来理解问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface propType{
    [key: string] : string
}
let props: propType
type dataType = {
    title: string
}
interface dataType1 {
    title: string
}
const data: dataType = {title: "订单页面"}
const data1: dataType1 = {title: "订单页面"}
props = data
// Error:类型“dataType1”不可分配给类型“propType”; 类型“dataType1”中缺少索引签名 
props = data1

我们发现dataType和dataType1对应的类型一样，但是interface定义的就赋值失败，是什么原因呢？刚开始百思不解，最后我在 stack overflow上找到了一个相似的问题：

并且很幸运的找到了有效的答案：

翻译过来的大致意思就是：

Record<string,string>与{[key:string]：string}相同。只有当该类型的所有属性都已知并且可以对照该索引签名进行检查时，才允许将子集分配给该索引签名类型。在您的例子中，从exampleType到Record<string,string>的所有内容都是可分配的。这只能针对对象字面量类型进行检查，因为一旦声明了对象字面量类型，就无法更改它们。因此，索引签名是已知的。

相反，在你使用interface去声明变量时，它们在那一刻类型并不是最终的类型。由于interfac可以进行声明合并，所以总有可能将新成员添加到同一个interface定义的类型上。

再结合:point_up_2:第4点 声明合并的讲解, 这样就很好理解了。就是说interface定义的类型是不确定的， 后面再来一个：

1
2
3
interface propType{
    title:number
}

这样propType类型就被改变了。

总结

官方推荐用 interface，其他无法满足需求的情况下用 type。

但其实，因为 联合类型 和 交叉类型 是很常用的，所以避免不了大量使用 type 的场景，一些复杂类型也需要通过组装后形成类型别名来使用。

所以，如果想保持代码统一，还是可选择使用 type。通过上面的对比，类型别名 其实可涵盖 interface 的大部分场景。

对于 React 组件中 props及 state，使用 type ，这样能够保证使用组件的地方不能随意在上面添加属性。如果有自定义需求，可通过 HOC二次封装。

编写三方库时使用interface，其更加灵活自动的类型合并可应对未知的复杂使用场景。

以上就是详解TypeScript中type与interface的区别的详细内容，更多关于TypeScript type interface区别的资料请关注脚本之家其它相关文章！

 

转：https://www.jb51.net/article/243639.htm

posted @ 2024-05-14 18:38  炽橙子  阅读(61)  评论(0)  编辑  收藏  举报