MST

星途 面试题库

面试题：TypeScript泛型约束在复杂类型中的应用

假设有一个接口 `HasNameAndAge`，定义了 `name`（字符串类型）和 `age`（数字类型）属性。实现一个泛型函数 `printUserInfo`，它接受一个满足 `HasNameAndAge` 接口约束的泛型对象，并打印出该对象的 `name` 和 `age`。同时，请说明如何利用类型推断和泛型约束来确保传入对象的正确性，以及在实际项目中这种约束的优势。
22.7万 热度难度
前端开发TypeScript

知识考点

AI 面试

面试题答案

一键面试

代码实现

interface HasNameAndAge {
    name: string;
    age: number;
}

function printUserInfo<T extends HasNameAndAge>(user: T) {
    console.log(`Name: ${user.name}, Age: ${user.age}`);
}

类型推断与泛型约束确保传入对象正确性的原理

  1. 类型推断：在调用 printUserInfo 函数时，TypeScript 会根据传入对象的实际类型来推断泛型 T 的具体类型。例如，如果传入 {name: "John", age: 30}，TypeScript 会推断 T 为 {name: string, age: number}。
  2. 泛型约束：通过 T extends HasNameAndAge，确保了泛型 T 必须包含 name（字符串类型）和 age（数字类型）属性。如果传入的对象不满足这个约束，TypeScript 会在编译时抛出错误，保证了代码的类型安全。

在实际项目中这种约束的优势

  1. 提高代码健壮性：防止传入不符合预期类型的对象，减少运行时错误。例如，如果误传入 {name: "John", age: "thirty"}，在编译阶段就会报错，避免了在运行时出现类型不匹配的错误。
  2. 增强代码可读性：通过明确的类型约束，其他开发人员可以清楚地知道函数期望的参数类型，降低理解和维护代码的成本。
  3. 便于代码重构：当接口 HasNameAndAge 发生变化时，依赖该接口的泛型函数会自动提示需要更新，有助于保持代码的一致性和可维护性。