面试题：TypeScript 类结构化类型在复杂项目架构中的优化应用

基于类的结构化类型优化项目

提高可维护性
- 清晰的接口定义：使用 TypeScript 的接口（interface）来定义类的结构。例如，假设有一个电商项目，有商品类 Product 和用户类 User，可以为它们定义接口。

interface ProductInterface {
    id: number;
    name: string;
    price: number;
}

class Product implements ProductInterface {
    id: number;
    name: string;
    price: number;
    constructor(id: number, name: string, price: number) {
        this.id = id;
        this.name = name;
        this.price = price;
    }
}

这样，当需要修改 Product 类的结构时，只需要修改接口定义，所有实现该接口的类都能明确知道需要遵循的新结构，降低了修改代码时对其他部分的影响。 - 单一职责原则：每个类只负责一项主要功能。例如，在一个文件上传模块中，有一个 FileUploader 类，它只负责文件上传的逻辑，不掺杂其他如文件解析等功能。

class FileUploader {
    upload(file: File) {
        // 上传文件逻辑
        console.log(`Uploading file: ${file.name}`);
    }
}

提高可扩展性
- 继承与多态：合理利用类的继承来扩展功能。例如，在一个图形绘制项目中，有一个基类 Shape，然后有 Circle 和 Rectangle 类继承自 Shape。

class Shape {
    color: string;
    constructor(color: string) {
        this.color = color;
    }
    draw() {
        console.log(`Drawing a shape with color ${this.color}`);
    }
}

class Circle extends Shape {
    radius: number;
    constructor(color: string, radius: number) {
        super(color);
        this.radius = radius;
    }
    draw() {
        console.log(`Drawing a circle with color ${this.color} and radius ${this.radius}`);
    }
}

class Rectangle extends Shape {
    width: number;
    height: number;
    constructor(color: string, width: number, height: number) {
        super(color);
        this.width = width;
        this.height = height;
    }
    draw() {
        console.log(`Drawing a rectangle with color ${this.color}, width ${this.width} and height ${this.height}`);
    }
}

当需要添加新的图形类型时，如 Triangle，可以轻松继承 Shape 类并实现自己的 draw 方法。 - 依赖注入：通过构造函数或方法参数注入依赖。例如，在一个邮件发送模块中，MailSender 类依赖于 EmailService。

interface EmailService {
    sendEmail(to: string, subject: string, body: string): void;
}

class DefaultEmailService implements EmailService {
    sendEmail(to: string, subject: string, body: string) {
        console.log(`Sending email to ${to} with subject ${subject} and body ${body}`);
    }
}

class MailSender {
    private emailService: EmailService;
    constructor(emailService: EmailService) {
        this.emailService = emailService;
    }
    send(to: string, subject: string, body: string) {
        this.emailService.sendEmail(to, subject, body);
    }
}

// 使用
const emailService = new DefaultEmailService();
const mailSender = new MailSender(emailService);
mailSender.send('test@example.com', 'Test Subject', 'Test Body');

这样，如果需要更换邮件服务实现，只需要注入新的 EmailService 实现类，而不需要修改 MailSender 类的内部逻辑。 3. 提高性能 - 延迟加载：对于一些不常用的模块或类，可以采用延迟加载。在 TypeScript 项目中，可以使用动态导入（import()）。例如，在一个大型的富文本编辑器项目中，拼写检查功能不是每次都需要，当用户点击拼写检查按钮时才加载相关模块。

document.getElementById('spell-check-button')?.addEventListener('click', async () => {
    const spellCheckerModule = await import('./spellChecker');
    const spellChecker = new spellCheckerModule.SpellChecker();
    spellChecker.checkSpelling();
});

- **减少不必要的实例化**：对于一些工具类，可以使用单例模式。例如，在一个日志记录模块中，`Logger` 类可以设计为单例。

class Logger {
    private static instance: Logger;
    private constructor() {}
    static getInstance() {
        if (!Logger.instance) {
            Logger.instance = new Logger();
        }
        return Logger.instance;
    }
    log(message: string) {
        console.log(`[${new Date().toISOString()}] ${message}`);
    }
}

// 使用
const logger1 = Logger.getInstance();
const logger2 = Logger.getInstance();
logger1.log('Log message');

这样可以避免多次实例化造成的资源浪费。

实际场景中可能遇到的问题及解决方案

循环依赖问题
- 问题描述：模块 A 依赖模块 B，模块 B 又依赖模块 A，导致代码无法正常运行或出现难以调试的错误。例如，在一个用户权限管理系统中，User 类依赖 Role 类获取用户角色信息，而 Role 类又依赖 User 类获取具有该角色的用户列表。
- 解决方案：
  - 重构代码：重新设计模块结构，将相互依赖的部分提取到一个新的模块中。例如，将 User 和 Role 之间相互依赖的逻辑提取到 UserRoleRelation 模块中。
  - 使用依赖注入：通过构造函数或方法参数注入依赖，而不是在类定义时直接导入。例如，在 User 类中，通过构造函数注入 Role 实例，而不是在类定义时导入 Role 模块。

class Role {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

class User {
    name: string;
    private role: Role;
    constructor(name: string, role: Role) {
        this.name = name;
        this.role = role;
    }
}

// 使用
const role = new Role('admin');
const user = new User('John', role);

类型兼容性问题
- 问题描述：在继承或实现接口时，可能会出现类型不兼容的情况。例如，在实现一个接口时，方法的参数类型或返回值类型与接口定义不一致。
- 解决方案：
  - 严格遵循接口定义：仔细检查接口定义，确保实现类的方法参数和返回值类型与接口完全一致。
  - 使用类型断言：在必要时，可以使用类型断言来告诉编译器变量的实际类型。例如，在获取 DOM 元素时，有时 TypeScript 无法准确推断元素类型，此时可以使用类型断言。

const inputElement = document.getElementById('input') as HTMLInputElement;
inputElement.value = 'Test value';

性能优化问题
- 问题描述：在大型项目中，过多的实例化、频繁的模块导入等可能导致性能下降。
- 解决方案：
  - 使用分析工具：如 webpack-bundle-analyzer 分析项目的模块依赖和打包体积，找出体积过大或不必要的模块，进行优化。
  - 遵循性能优化原则：如上述提到的延迟加载、减少不必要的实例化等方法，优化代码性能。

面试题：TypeScript 类结构化类型在复杂项目架构中的优化应用

知识考点

面试题答案

基于类的结构化类型优化项目

实际场景中可能遇到的问题及解决方案