TypeScript细碎知识点：interface和type的区别

一、区别

interface 和 type 两个关键字的含义和功能都非常的接近。这里我们罗列下这两个主要的区别：

interface

• 同名的 interface 自动聚合，也可以跟同名的 class 自动聚合
• 只能表示 object、class、function 类型

type

• 不仅仅能够表示 object、class、function
• 不能重名（自然不存在同名聚合了），扩展已有的 type 需要创建新 type
• 支持复杂的类型操作

二、举例

举例说明下上面罗列的几点：

1. Objects/Functions

都可以用来表示 Object 或者 Function ，只是语法上有些不同而已

⏰ interface

//定义一个 【Object】 类型
interface Point {
    x: number,
    y: number
}

//定义一个 【Function】 类型
interface setPoint {
    (x:number, y:number): void
}

⏰ type

//定义一个 【Object】 类型
type Point = {
    x: number,
    y: number
}

//定义一个 【Function】 类型
type setPoint = (x:number, y:number)=> void;

2. 其他数据类型

与 interface 不同，type 还可以用来表示其他的类型，比如基本数据类型、元素、并集等

⏰ interface

interface 只能表示Object, Function。 不能表示其它类型

⏰ type

//【基本类型】
type Name = string;

//【类型并集&交叉】
type PartialPointX = {x: number}
type PartialPointY = {y: number}
//并集
type PartialPoint = PartialPointX | PartialPointY 
//交叉
type PartialPoint1 = PartialPointX & PartialPointY

//【元祖类型】
type Data = [number, string, boolean]

3. Extend

🔊: 都可以被继承，但是语法上会有些不同。另外需要注意的是，「interface 和 type 彼此并不互斥」。

⏰ interface extends interface

interface PartialPointX {x: number};
//interface 继承 interface
interface Point extends PartialPointX {
    y: number
};

⏰ type extends type

type PartialPointX = {x: number}
//通过 &(类型交叉) 达到继承的目的 
type Point = PartialPointX & {y: number};

⏰ interface extends type

type PartialPointX = {x: number}
// interface 继承 type 
interface Point extends PartialPointX {
    y: number;
}

⏰ type extends interface

interface ParticalPointX {
    x: number
}
//通过 &(类型交叉) 达到继承的目的 
type Point = ParticalPointX & {y: number};

📢 总结：interface 和 type 两个关键字的含义和功能都非常的接近。我们可以把粗浅的它俩理解成两亲兄弟👬，两者本质差别不大。如果两者本质上差别不大，也不会存在可以相互继承的规则在。只不过，两者都有着属于自己的一套规则。

4. implements

🔊 一个类，可以以完全相同的形式去实现interface 或者 type。👀 但是，类和接口都被视为静态蓝图（static blueprints），因此，他们不能实现/继承 联合类型的 type

✅ : 正确

// 实现 interface 定义的类型
interface Point {
    x: number
    y: number
}
//✅
class SomePoint implements Point {
    x: 1;
    y: 2;
}


// 实现 type 定义的类型
type Point2 = {
    x: 1;
    y: 2;
}
//✅
class SomePoint2 implements Point2 {
    x: 1;
    y: 2;
}

❌ : 错误

type PartialPoint = {x: number} | {y: number}
//❌：类只能实现具有静态已知成员的对象类型或对象类型的交集。
class SomePartialPoiint implements PartialPoint {
    x: 1;
    y: 2;
}

❓：为什么

因为 联合类型的 type，其确切的类型，并不能确定。


type myType = string | number
// 字符串类型
const myTypeString: myType = '1';
// 数字类型
const myTypeNumber: myType = 1;

5. 声明合并

和 type 不同，interface 可以被重复定义，并且会被自动聚合

⏰ interface

interface Point { x: number; }
interface Point { y: number; }
//等价于
interface Point {
    x: number;
    y: number;
}

⏰ type

6. only interface can

🔊：在实际开发中，有的时候也会遇到 interface 能够表达，但是 type 做不到的情况：「给函数挂载属性」

interface FuncWithAttachment {
    (param: string): boolean;
    someProperty: number;
}

const testFunc: FuncWithAttachment = function (param: string) {
    return param.indexOf("Neal") > -1;
}

const result = testFunc("Nealyang"); //有类型提醒
testFunc.someProperty = 4;

三、总结

相同点

1、都可以描述一个对象或者函数
2、都允许拓展（extends）

❗️interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多，但是两者语法不同。

不同点

1、type 可以声明基本类型别名，联合类型，元组等类型，而 interface 不行
2、type 语句中还可以使用 typeof 获取实例的 类型进行赋值，而 interface 不行
3、type还可以定义联合类型等
4、interface 能够声明合并，而 type 不行

❗️一般来说，如果不清楚什么时候用interface/type，能用 interface 实现，就用 interface , 如果不能就用 type 。