跳转到主要内容
模块 2 · 第 1 课(共 2)课程中的3/14~12 min
模块课程(1/2)

类型别名与接口

在 TypeScript 中,我们可以通过两种主要方式定义复杂对象的结构:使用 接口 (interface) 或 类型别名 (type)。两者都用于描述对象或数据结构的“形状”,但它们有一些基本差异。


接口 (interface)

接口定义了对象结构的契约。它是以可扩展的方式描述对象形状和公共 API 的标准工具。

TS
interface Book {
  title: string;
  pages: number;
  author?: string; // Optional property (can be omitted)
}

const myBook: Book = {
  title: 'The Lord of the Rings',
  pages: 1200,
};

问号 (?) 将属性标记为 可选。即使 myBook 对象省略 author 属性,它也是有效的。


类型别名 (type)

类型别名允许您将新名称与任何现有类型相关联,包括基本类型、联合、元组或整个对象结构。

TS
type Point = {
  x: number;
  y: number;
};

const coordinates: Point = { x: 10, y: 20 };

主要区别:扩展和声明合并

尽管 interface 和 type 对于大多数普通用例来说是可以互换的,但它们表现出两个关键区别:

1.可扩展性(继承)

使用 extends 关键字扩展接口:

TS
interface User {
  username: string;
}

interface Admin extends User {
  privileges: string[];
}

类型别名无法使用 extends 进行扩展,但可以使用 交集 运算符 (&) 进行组合:

TS
type User = {
  username: string;
};

type Admin = User & {
  privileges: string[];
};

2. 声明合并

同一范围内的多个同名接口会被编译器自动合并:

TS
interface User {
  name: string;
}
interface User {
  email: string;
}
// Now User has both 'name' and 'email'!

类型别名不支持此行为:声明相同的 type 两次将触发编译时错误。


自己尝试一下

练习 1:用户界面

锻炼#ts.m2.l1.e1
尝试:0加载中...

定义一个名为 User 的接口,用于描述用户对象。该接口必须包含:数字形式的 id、字符串形式的用户名以及可选字符串形式的电子邮件。

正在加载编辑器...
显示提示

使用语法 email?: string 将其标记为可选。

3 次尝试后可用的解决方案

练习 2:Point2D 类型别名

锻炼#ts.m2.l1.e2
尝试:0加载中...

创建一个名为 Point2D 的类型别名,表示具有坐标 x 和 y(均为数字)的二维点。

正在加载编辑器...
显示提示

使用语法 type Point2D = { x: number; y:数字; };

3 次尝试后可用的解决方案

练习 3:扩展接口

锻炼#ts.m2.l1.e3
尝试:0加载中...

使用 id(数字)和价格(数字)定义名为 Product 的接口。接下来,定义一个名为 DiscountedProduct 的接口,该接口扩展 Product 并添加一个名为discountCode(字符串)的可选属性。

正在加载编辑器...
显示提示

使用extends Product继承字段,并添加discountCode?: string。

3 次尝试后可用的解决方案

练习 4:服务器配置

锻炼#ts.m2.l1.e4
尝试:0加载中...

定义一个名为 ServerConfig 的类型别名,表示服务器的配置对象。它必须包含:主机(字符串)、端口(数字)和 useHttps 作为可选布尔字段。

正在加载编辑器...
显示提示

使用语法 type ServerConfig = { host: string;端口:号码;使用Https?:布尔值; }。

3 次尝试后可用的解决方案