模块课程(1/2)
类型别名与接口
在 TypeScript 中,我们可以通过两种主要方式定义复杂对象的结构:使用 接口 (interface) 或 类型别名 (type)。两者都用于描述对象或数据结构的“形状”,但它们有一些基本差异。
接口 (interface)
接口定义了对象结构的契约。它是以可扩展的方式描述对象形状和公共 API 的标准工具。
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)
类型别名允许您将新名称与任何现有类型相关联,包括基本类型、联合、元组或整个对象结构。
type Point = {
x: number;
y: number;
};
const coordinates: Point = { x: 10, y: 20 };主要区别:扩展和声明合并
尽管 interface 和 type 对于大多数普通用例来说是可以互换的,但它们表现出两个关键区别:
1.可扩展性(继承)
使用 extends 关键字扩展接口:
interface User {
username: string;
}
interface Admin extends User {
privileges: string[];
}类型别名无法使用 extends 进行扩展,但可以使用 交集 运算符 (&) 进行组合:
type User = {
username: string;
};
type Admin = User & {
privileges: string[];
};2. 声明合并
同一范围内的多个同名接口会被编译器自动合并:
interface User {
name: string;
}
interface User {
email: string;
}
// Now User has both 'name' and 'email'!类型别名不支持此行为:声明相同的 type 两次将触发编译时错误。
自己尝试一下
练习 1:用户界面
定义一个名为 User 的接口,用于描述用户对象。该接口必须包含:数字形式的 id、字符串形式的用户名以及可选字符串形式的电子邮件。
显示提示
使用语法 email?: string 将其标记为可选。
3 次尝试后可用的解决方案
练习 2:Point2D 类型别名
创建一个名为 Point2D 的类型别名,表示具有坐标 x 和 y(均为数字)的二维点。
显示提示
使用语法 type Point2D = { x: number; y:数字; };
3 次尝试后可用的解决方案
练习 3:扩展接口
使用 id(数字)和价格(数字)定义名为 Product 的接口。接下来,定义一个名为 DiscountedProduct 的接口,该接口扩展 Product 并添加一个名为discountCode(字符串)的可选属性。
显示提示
使用extends Product继承字段,并添加discountCode?: string。
3 次尝试后可用的解决方案
练习 4:服务器配置
定义一个名为 ServerConfig 的类型别名,表示服务器的配置对象。它必须包含:主机(字符串)、端口(数字)和 useHttps 作为可选布尔字段。
显示提示
使用语法 type ServerConfig = { host: string;端口:号码;使用Https?:布尔值; }。
3 次尝试后可用的解决方案