typescript : interface vs type , 一个字点明他们的区别

站长

2023年09月08日 16:27 · 阅读数 12

alias 这个字，一般译作别名，足以说明 interface 和 type 的区别。

code review 的故事

那是个三年前的故事。

那是一次烦闷的下午午后，某厂的室内温度还是一如既往的温暖。而我，在努力地 code review。对着一处代码，我建议同事类型申明关键字用 interface 而不是 type, 同事代码大概如下：

type Person = {
    name: string;
    age: number;
}

我建议把 type 改成 interface, 示意如下：

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

同事不乐意了，说 interface 能干的事，type 也能干，一句话，这里用 type 没问题。

然后给我发了篇网上的文章，具体内容我不记得了，大概就是 type 和 interface 的相同点是啥，都能 extends 、interface 不能申明基础类型而 type 可以之类的话，到底什么场景用哪个，也很模糊。

接着同事还说了句，既然 ts 提供了 type 这个类型，肯定是得用啊，不用它造这个干嘛。

是啊，既然提供了 type 肯定得用啊。但 type 和 interface 这么像，到底怎么取舍呢？

具体怎么像，可以网上搜搜，目前还是能搜到类似文章。不过，真的理解了他们的区别，会发现他们说得虽然大多数没错，但没说到根本。

`type` 到底有啥用

二者到底如何取舍，让我用个 js 例子，先说说 type 的用法。

假如你需要调用一个函数，抓取某当红明星微博粉丝数量：

function getFansCount(celebrity) {
    ...
}

// 获取明星粉丝数量
getFansCount("somboy's name")

要获取粉丝数量，直接往 getFansCount 传明星名字就可以了。

后来，来了个新需求，你需要获取粉丝的作品数，

function getWorkCount(celebrity) {
    ...
}

// 获取作品数量
getWorkCount("somboy's name")

也可以直接 getWorkCount 传明星名字。

不过，这名字多处使用，为何方便复用，我们可以给它取个名字，存起来：

var celebrity = '"somboy's name"'

就像这里的 var 就是给 "somboy's name" 取个别名，方便复用； type 的道理也一样：

type 是给类型取个别名 alias 方便使用。

那有同学可能会问，用 interface 挺好，为何用 type 呢？也是因为一个类型多处使用，用 type 取个别名，方便复用。这里以 ts 代码举例：


// 获取时间
function getHour(time: string | number) {
    return new Date(isNumber(time) ? time: Number(time))
}

// 获取总价
function getTotalPrice(price: string | number) {
    return (isNumber(time) ? time: Number(time)) * COUNT
}

上面的 联合类型 string | number 多次申明，我们可以这样：

type Num: string | number;


function getHour(time: Num) {
    ...
}

function getHour(time: Num) {
    ...
}

结论

总结一下，上面是说，如果申明了一个类型，需要多处复用，可以用 type 给它取个别名，方便使用。

也就是说，

需要给类型取别名 alias 时，就可以用 type;
需要申明复杂的类型，可以用 interface;

想了解 type 的同学，应该了解 interface 的用法了，网上说的比较多，这里不赘述。

二者的根本区别，在于 定位 , 在于应用场景。

typescript : interface vs type , 一个字点明他们的区别

code review 的故事

type 到底有啥用

结论

`type` 到底有啥用