面试题：JavaScript与TypeScript类型系统在复杂数据结构和泛型应用上的深度剖析

Question

在处理一个包含多种类型数据的复杂对象数组时（例如，数组中的对象可能包含字符串、数字、布尔值等不同类型的属性），请阐述如何利用TypeScript的类型系统来确保对该数组中对象属性的正确访问和操作。要求使用泛型来实现一个通用的函数，该函数能够根据不同的对象结构，对数组中的对象进行特定属性的筛选和排序。对比在JavaScript中实现相同功能时，类型系统的缺失会给代码带来哪些挑战和风险。

Answer 1

1. 使用TypeScript实现

首先，定义一个泛型函数来处理对象数组。假设我们要根据对象的某个属性进行筛选和排序。

// 定义泛型函数，T表示对象的类型，K表示要筛选和排序的属性的键
function filterAndSort<T, K extends keyof T>(
    array: T[],
    key: K,
    compare: (a: T[K], b: T[K]) => number
): T[] {
    return array
      .filter(obj => obj[key]!== undefined)
      .sort((a, b) => compare(a[key], b[key]));
}

// 示例使用
interface Person {
    name: string;
    age: number;
}

const people: Person[] = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 20 },
    { name: 'Charlie', age: 30 }
];

const sortedPeople = filterAndSort(people, 'age', (a, b) => a - b);
console.log(sortedPeople);

2. JavaScript中实现相同功能的挑战和风险

• 类型错误：在JavaScript中没有类型系统，当访问对象属性时，很容易出现拼写错误，导致运行时错误。例如，可能将 obj.age 写成 obj.aege，在运行前很难发现这个错误。
• 属性不存在：在JavaScript中无法在编译时确保对象具有特定属性。例如，对一个没有 age 属性的对象调用 obj.age，会得到 undefined，可能导致后续代码出错，而且在开发过程中难以提前察觉。
• 排序逻辑错误：在JavaScript中进行排序时，如果传递的比较函数参数类型不正确，很难在开发阶段发现。例如，比较函数应该接收两个相同类型的参数，但由于没有类型检查，可能传递了不同类型的参数，导致排序结果错误。
• 代码可读性和可维护性：没有类型系统，代码的意图和数据结构不够清晰。其他开发人员阅读和理解代码时，需要花费更多精力去推断数据类型和可能的操作。