编程后端开发者

如何在 TypeScript 中描述复杂数据结构的类型(例如嵌套对象、具有不同类型的数组)?有哪些方法和常见的陷阱?请提供实际示例。

用 Hintsage AI 助手通过面试

回答。

在 TypeScript 中描述复杂数据结构使用接口(interface)和类型别名(type)。可以将它们与对象、数组和嵌套类型组合,以严格类型化复杂集合。

对于嵌套对象:

interface Address { city: string; zip: number; } interface UserProfile { name: string; age: number; address: Address; }

对于不同类型的数组:

// 元组 let tuple: [string, number] = ['John', 30]; // 具有联合类型的数组 let arr: (string | number)[] = [1, 'a', 2, 'b']; // 对象数组 let users: UserProfile[] = [ {...}, {...} ];

当结构复杂且有可选字段时,使用 ?,并与 PartialRecordMapped Types 或递归类型组合以处理嵌套树。

陷阱问题。

问题: 是否可以使用接口来描述具有不同类型元素的数组(例如 [string, number, boolean])?

回答: 不可以。对于这种情况,最好使用元组——接口不适用于固定位置和类型。元组允许严格指定每个位置的类型。

type MyTuple = [string, number, boolean]; let foo: MyTuple = ['ok', 12, false];

由于对主题细微差别的不熟悉而导致的实际错误示例。


故事

在一个项目中,复杂结构描述不正确:对于混合类型的数组使用了 any[],而不是正确的元组或联合类型。结果,其中一个元素的值类型不正确,导致业务逻辑错误(与字符串的算术操作)。


故事

数据结构中的深度嵌套对象在没有使用递归类型或 Partial 的情况下声明。尝试向树节点添加一个新的子树时引发了编译器错误,开发人员通过强制转换为 any 进行绕过,这导致生产环境中的运行时错误。


故事

描述用户个人资料的对象是部分可选的,但开发人员没有使用 ?。从服务器获取数据时 TypeScript 没有报错,应用程序崩溃,试图访问在对象中不存在的字段。