ts中type 与 interface 的区别

目录

前言

一、类型别名 type

二、接口 interface

三、两者之间的异同

1.相似之处：

1.1都可以描述 Object和Function

type

interface

1.2.二者都可以被继承

实现 implements

2.不同之处：

2.1type优势

1. 定义基本类型别名

2. 声明联合类型

3. 声明元组

4. 索引签名问题

2.2interface优势

1. 声明合并

总结

前言

真正的理解interface 和 type 之间到底有啥区别，分别在什么场景下使用

一、类型别名 type

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

二、接口 interface

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

三、两者之间的异同

1.相似之处：

1.1都可以描述 Object和Function

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

代码如下（示例）：

type


type Point = {
  x: number;
  y: number;
};
type SetPoint = (x: number, y: number) => void;

interface

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

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

1.2.二者都可以被继承

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

代码如下（示例）：

interface 继承 interface

interface Person{
    name:string
}

interface Student extends Person { stuNo: number }


interface 继承 type

type Person = {
    name:string
}

interface Student extends Person { stuNo: number }


type 继承 type

type Person = {
    name:string
}

type Student = Person & { stuNo: number }


type 继承 interface

interface Person{
    name:string
}

type Student = Person & { stuNo: number }

1.3实现 implements

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

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
    }
}

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

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
    }
}

2.不同之处：

2.1type优势

1. 定义基本类型别名

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

type userName = string
type stuNo = number
...

2. 声明联合类型

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

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

3. 声明元组

type可以声明 元组类型：

type Data = [number, string];

4. 索引签名问题

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

Type 'xxx' is not assignable to type 'yyy'
Index signature is missing in type 'xxx'.

看个例子来理解问题：

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

原因：由于interfac可以进行声明合并，所以总有可能将新成员添加到同一个interface定义的类型上，也就是说interface定义的类型是不确定的；而type一旦声明类型，就无法更改它们。因此，索引签名是已知的。

2.2interface优势

1. 声明合并

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

interface Person { name: string }
interface Person { age: number }

let user: Person = {
    name: "Tolu",
    age: 0,
};

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

type Person { name: string }; 

// Error: 标识符“Person”重复。ts(2300)
type Person { age: number }

总结

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

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

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

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

秒客网