Typescript 中的 interface 和 type 有什么区别

  • 类型别名 type
  • 接口 interface
  • interface和type的相似之处
    • 都可以描述 Object和Function
    • 二者都可以被继承
      • interface 继承 interface
      • nterface 继承 type
      • type 继承 type
      • type 继承 interface
      • 实现 implements
  • interface和type的区别
    • 定义基本类型别名
    • 声明联合类型
    • 声明元组
    • 声明合并
    • 索引签名问题
  • 总结

类型别名 type

类型别名用来给一个类型起个新名字,使用 type 创建类型别名。

类型别名不仅可以用来表示基本类型,还可以用来表示对象类型、联合类型、元组和交集。

让我们看一些例子:

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 重写为接口声明:

interface Person {
    id: userId;
    name: userName;
    age: number;
    gender: string;
    isWebDev: boolean;
}

interface和type的相似之处

都可以描述 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;
}

二者都可以被继承

interface 和 type 都可以继承。

另一个值得注意的是,接口和类型别名并不互斥。

类型别名可以继承接口,反之亦然。

只是在实现形式上,稍微有些差别。

interface 继承 interface
interface Person{
    name:string
}
interface Student extends Person { stuNo: number }
nterface 继承 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 }
实现 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
    }
}

interface和type的区别

定义基本类型别名

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

type userName = string
type stuNo = number
...

声明联合类型

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

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

声明元组

type可以声明 元组类型:

type Data = [number, string];

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

声明合并

如果你多次声明一个同名的接口,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 }

索引签名问题

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

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

总结

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

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

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

更多详细内容,请微信搜索“前端爱好者戳我 查看

参考文档:

  • https://www.jb51.net/article/243639.htm

你可能感兴趣的:(前端杂货铺,前端面试题,typescript,前端,java)