Skip to main content

TypeScript 中的 Interface 和 Type Alias

相关问题

  • Interface 和 Type Alias 的作用
  • Interface 和 Type Alias 的相同点
  • Interface 和 Type Alias 的区别

回答关键点

类型约束 扩展 类型合并

Interface 和 Type Alias(Type 别名,下文简称 Type)是 TypeScript 中两个非常重要且常用的概念。在程序设计中,Interface 和 Type 主要起到类型的限制和规范的作用,它们不关心实现细节,只规定和限制类或变量必须提供对应的属性和方法。

Interface 和 Type 核心的区别是 Type 不可在定义后重新添加内容,而 Interface 则总是可以扩展新内容。相比 Interface,Type 并没有实际创建一个新的类型,而是创建一个引用某个类型的名字。

知识点深入

总体来说,Interface 和 Type 两者非常相似,Interface 的特性大部分都可以使用 Type 实现,在大多数场景下都可以任意选择 Interface 或 Type 实现功能。根据这两者设计上的异同,可以总结出两者使用上的相同点和不同点。

1. Interface 和 Type 的相同点

1.1 可描述对象/函数

Interface 和 Type 都可以描述对象和函数。

// Interface
interface IHzfe {
name: string;
}
interface GetHZFE {
(): string;
}

// Type
type THzfe = {
name: string;
};
type GetHZFE = () => string;

1.2 可扩展

Interface 和 Type 都可以扩展类型。

// Interface
interface IHzfe {
name: string;
}
interface IShfe extends IHzfe {
location: string;
}

// Type
type THzfe = {
name: string;
};
type TShfe = THzfe & { location: string };

另外,Interface 的 extends 和 Type 的交叉类型有一些细微区别:extends 中的同名字段的类型必须是兼容的。而交叉类型中出现了同名字段且类型不同时,则类型一般是 never。

1.3 class Implements

Interface 和 Type 描述的类型都可以被 class 实现。

// Interface
interface IHzfe {
name: string;
}

// Type
type THzfe = {
name: string;
};

class HZFE1 implements IHzfe {
name = "HZFEStudio";
}
class HZFE2 implements THzfe {
name = "HZFEStudio";
}

2. Interface 和 Type 的不同点

2.1 基本类型别名、联合类型、元组

由于 Type 定义的实际是一个别名,所以 Type 可以描述一些基本类型、联合类型和元组的别名。

// 基本类型
type HZFEMember = number;

// 联合类型
type HZFEMemberTechStack = string | string[];

// 元组
type HZFEMember = [number, string];

2.2 声明合并

Interface 可以重复定义,并将合并所有声明的属性为单个接口。而 Type 不可重复定义。

// Interface
interface IHzfe {
name: string;
}
interface IHzfe {
member: number;
}

const hzfe: IHzfe = { name: "HZFE", member: 17 };

2.3 动态属性

Type 可以使用 in 关键字动态生成属性,而 Interface 的索引值必须是 string 或 number 类型,所以 Interface 并不支持动态生成属性。

type HZFELanguage = "JavaScript" | "Go";
type HZFEProjects = {
[key in HZFELanguage]?: string[];
};

const hzfeProjects: HZFEProjects = {
JavaScript: ["xx", "xx"],
};

参考资料

  1. TypScript - Typed JavaScript at Any Scale
Loading script...