type 能全面替代 interface 吗？两者区别是什么？

前端用 TypeScript 开发项目时，需要定义一个对象类型时，你是使用interface还是type？

使用interface：

interface User {
  name: string;
  avatar: string;
  level: number;
}

使用type：

type User = {
  name: string;
  avatar: string;
  level: number;
}

两者效果完全一样，都能达到我们的目的。

那么问题来了，在描述一个对象结构时，两者到底有何区别？我们到底应该使用哪种方式更好呢？

我们先从多个维度来对比一下两者的区别。

继承

interface写法：

interface UserBasic extends User {
  email: string;
}

type写法：

type UserBasic = {
  email: string;
} & User;

interface是真正的继承，而type是模拟继承，实则是合并，但是最后达到的效果却是一样的。

然而，interface 不能继承基本类型。

class S extends string {} // 语法报错

type则不受影响：

type S = string & number & {};

扩展

interface写法：

interface User {
  email: string;
}

interface User {
  phone: number;
}

interface定义的相同名称的类型，会自动合并；type不能定义相同的名称，会直接报错。

这种用法在扩展第三方库/内置类型时非常有用。

比如，给Array扩展一个自定义方法：

interface Array<T> {
  last(): T | undefined;
}

Array.prototype.last = function() {
  return this[this.length - 1];
};

const arr = [1, 2, 3];
console.log(arr.last());

class 实现

在面向对象开发时，我们分别使用interface和type来定义两个接口，看它们是否支持 class 实现。

interface写法：

interface IUser {
  name?: string;
  age: number;
  isAdult(): boolean;
}

class User implements IUser {
  age = 16;
  isAdult() {
    return this.age >= 18;
  }
}

type写法：

type IUser = {
  name?: string;
  age: number;
  isAdult(): boolean;
}

class User implements IUser {
  age = 16;
  isAdult() {
    return this.age >= 18;
  }
}

两种写法都完全支持！

关键区别

总结一下上面的几点，你会发现：

关键区别：type除了不能扩展同名类型，其他好像都能完全替代interface。本质区别

回到type本身的定义，type 其实就是给其他类型取别名的。

所以type不仅支持对象类型，还支持为基本类型、联合类型、数组类型、函数类型等各种类型取别名。

比如上面定义的IUser：

type IUser = {
  name?: string;
  age: number;
  isAdult(): boolean;
}

其实就是将后面匿名的对象类型取了一个别名叫做IUser，方便重复使用，如果只用一次完全可以不需要名称。

你也可以看作是这样的：

interface User {
  name?: string;
  age: number;
  isAdult(): boolean;
}

type IUser = User;

而interface则不同，它是定义一个有名称对象类型的更“标准”写法。

如何选择？

大多数时候，你可以根据自己或团队的习惯任意选择一个来使用，只需记住它们的关键区别即可。

不过使用type也有一个小小的优势，鼠标放上去时，编辑器会自动展开显示它的内部结构。

interface则只会展示名称。

如果你还是犹豫不定的话，那么也可以优先使用interface，直到需要type时再使用它。

以上关于type 能全面替代 interface 吗？两者区别是什么？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。