面试题：TypeScript自定义类型保护与泛型的深度结合及应用场景

Question

在一个具有泛型的函数中，要求使用自定义类型保护来确保泛型类型具有特定的属性或方法。请举例说明如何实现，并阐述在实际项目中，这种结合在哪些场景下能够显著提升代码的安全性和可维护性，例如在大型前端框架的组件开发中的应用。

Answer 1

实现自定义类型保护结合泛型函数示例

在 TypeScript 中，可以通过以下方式实现。假设我们有一个泛型函数，希望确保传入的对象具有 length 属性：

function hasLength<T>(obj: T): obj is T & { length: number } {
    return 'length' in obj;
}

function printLength<T extends { length: number }>(items: T) {
    if (hasLength(items)) {
        console.log(`Length is: ${items.length}`);
    }
}

printLength([1, 2, 3]);
printLength('hello');

在上述代码中，hasLength 是一个自定义类型保护函数。它接收一个泛型参数 obj，并返回一个类型谓词 obj is T & { length: number }，表示 obj 不仅是类型 T，而且具有 length 属性。printLength 函数使用这个类型保护来确保传入的 items 具有 length 属性，从而安全地访问 length。

在实际项目中的应用场景

1. 大型前端框架的组件开发：
   • 属性验证：在 React 或 Vue 等前端框架中，组件可能接收各种类型的 props。通过自定义类型保护结合泛型，可以确保 props 具有特定的属性。例如，一个列表展示组件可能接收一个泛型类型的数据源，使用自定义类型保护可以确保数据源中的每个元素都具有用于显示的必要属性，如 id 和 name。
   • 方法调用安全：当组件需要调用传入对象的特定方法时，这种结合尤为重要。比如一个可排序的表格组件，接收一个泛型类型的排序函数数组。通过自定义类型保护，可以确保每个函数都具有正确的参数和返回值类型，提升代码在运行时的安全性，减少因类型不匹配导致的错误，同时在代码维护时，清晰的类型定义和类型保护逻辑使得后续开发者更容易理解和修改代码。