面试题：TypeScript类声明值与类型的底层机制及优化

1. TypeScript类同时声明值和类型背后的底层实现机制

编译期：
- 类型检查：TypeScript编译器在编译期会对类的声明进行类型检查。当声明一个类时，比如class Person { name: string; age: number; }，编译器会验证类中属性的类型声明是否正确。如果使用该类创建实例时，属性类型不符合声明，编译器会报错。
- 类型推断：对于未明确声明类型的属性，编译器会进行类型推断。例如class Animal { legs; constructor() { this.legs = 4; } }，编译器会推断legs的类型为number。
- 类型擦除：TypeScript的类型信息在编译后会被擦除。编译后的JavaScript代码中不包含类型相关的内容。比如上述Person类，编译后生成的JavaScript代码仅保留属性和方法的实现，而name和age的类型声明消失。
运行时：
- 实例创建：运行时，类就像普通的JavaScript构造函数一样工作。当使用new关键字创建类的实例时，如let p = new Person();，JavaScript引擎会在内存中分配空间，并调用构造函数初始化实例的属性。
- 动态特性：由于类型信息在运行时已被擦除，JavaScript的动态特性依然存在。例如可以在运行时为实例添加未在TypeScript类中声明的属性，p.gender ='male'; 虽然在TypeScript编译期这样做可能会报错，但在运行时不会有问题。

2. 类声明导致性能问题的优化方向

减少不必要的类型声明：
- 原因：过多复杂的类型声明，尤其是在大型项目中，会增加编译时间。例如过度使用泛型、交叉类型、联合类型等复杂类型，编译器需要花费更多时间进行类型检查和推断。
- 优化方法：尽量简化类型声明，只在必要时使用复杂类型。例如，如果一个函数只接收字符串类型的参数，直接声明function printMessage(message: string) {}，而不是使用联合类型function printMessage(message: string | number) {}，除非确实需要接收多种类型。
避免过度继承：
- 原因：深度继承链会增加实例化和方法调用的开销。每次实例化子类时，不仅要初始化子类自身的属性，还要沿着继承链初始化父类的属性。方法调用时也需要沿着原型链查找，增加查找时间。
- 优化方法：考虑使用组合代替继承。例如，假设有一个Car类和Engine类，如果Car通过继承Engine来获取动力相关功能，可能会导致继承链复杂。可以改为在Car类中组合Engine实例，即class Car { engine: Engine; constructor() { this.engine = new Engine(); } }。
延迟加载类：
- 原因：在大型项目中，如果某些类在应用启动时就被加载，但实际使用频率较低，会浪费资源，影响性能。
- 优化方法：使用动态导入（import()语法）来延迟加载类。例如，在一个Web应用中，某个特定功能模块的类只有在用户点击相应按钮时才需要使用，可以这样实现：

// 按钮点击事件处理函数
document.getElementById('btn').addEventListener('click', async () => {
    const { SpecificClass } = await import('./SpecificClass');
    const instance = new SpecificClass();
    instance.doSomething();
});

3. 实际案例说明

案例场景：有一个大型的电商管理系统，其中有一个Product类，它继承自BaseEntity类，并且有很多复杂的类型声明。Product类有多个属性，如id（字符串类型，但在不同场景下可能是UUID格式或者普通数字字符串，所以声明为string类型），price（number类型），categories（联合类型，因为一个产品可能属于多个不同类型的分类，如string | number[]）等。同时，还有一些子类如DigitalProduct和PhysicalProduct继承自Product类，形成了一定深度的继承链。在系统运行过程中，发现页面加载速度慢，特别是涉及到产品列表展示和操作时。
优化思路和方法：
- 类型声明优化：仔细分析categories属性，发现实际上在大部分业务场景中，分类都是字符串类型，只有极少数特殊情况才是数字数组。于是将categories属性类型改为string，并在特殊处理逻辑中进行类型检查和转换。这样减少了编译期的类型检查复杂度。
- 继承优化：将DigitalProduct和PhysicalProduct对Product类的继承关系，部分改为组合关系。例如，DigitalProduct类中某些特有的功能不再通过继承Product类获取，而是通过组合一个DigitalFeature类实例来实现。
- 延迟加载优化：对于一些很少使用的产品管理功能，如产品的历史版本查看功能，相关的类原本在系统启动时就被加载。通过使用动态导入，将这些类的加载延迟到用户点击查看历史版本按钮时。经过这些优化后，系统页面加载速度明显提升，操作响应更加流畅。

星途面试题库

面试题：TypeScript类声明值与类型的底层机制及优化

知识考点

面试题答案

1. TypeScript类同时声明值和类型背后的底层实现机制

2. 类声明导致性能问题的优化方向

3. 实际案例说明