面试题：TypeScript在大型前端项目中的模块与接口设计

1. 使用TypeScript模块系统组织代码

在大型前端项目中，将代码按照功能划分为不同的模块。例如，一个电商项目可能有用户模块、商品模块、购物车模块等。

定义模块：
- 在TypeScript中，每个.ts文件就是一个模块。比如创建user.ts文件，用于处理用户相关逻辑。
```
// user.ts
export const getUserInfo = () => {
    // 模拟获取用户信息逻辑
    return { name: 'John', age: 30 };
};
```
- 如果模块中有多个导出，可以使用export关键字在函数、变量、类等声明前，也可以在文件末尾统一导出。
```
// utils.ts
const add = (a: number, b: number) => a + b;
const subtract = (a: number, b: number) => a - b;
export { add, subtract };
```
导入模块：
- 在需要使用其他模块功能的地方，使用import关键字导入。例如在main.ts中导入user.ts的功能。
```
// main.ts
import { getUserInfo } from './user';
const user = getUserInfo();
console.log(user);
```

2. 使用接口确保类型安全和结构清晰

接口可以用于定义对象的形状、函数的参数和返回值类型等，使不同模块之间交互的数据结构明确。

定义接口：

假设在商品模块中，商品数据有特定的结构。创建product.ts文件并定义商品接口。

// product.ts
export interface Product {
    id: number;
    name: string;
    price: number;
}
export const getProduct = (): Product => {
    return { id: 1, name: 'Sample Product', price: 100 };
};

使用接口：

在购物车模块中，可能需要处理商品数据，此时可以使用商品接口来确保传入的数据符合预期结构。

// cart.ts
import { Product } from './product';
const addProductToCart = (product: Product) => {
    // 处理添加商品到购物车逻辑
    console.log(`Added ${product.name} to cart`);
};

3. 确保依赖关系清晰

依赖倒置原则：尽量依赖抽象（接口）而不是具体实现。例如，在一个支付模块中，定义支付接口。

// payment.ts
export interface PaymentMethod {
    pay(amount: number): void;
}
export class CreditCardPayment implements PaymentMethod {
    pay(amount: number) {
        console.log(`Paid ${amount} using credit card`);
    }
}
export class PayPalPayment implements PaymentMethod {
    pay(amount: number) {
        console.log(`Paid ${amount} using PayPal`);
    }
}

在订单模块中，依赖PaymentMethod接口而不是具体的支付类。

// order.ts
import { PaymentMethod } from './payment';
const placeOrder = (amount: number, paymentMethod: PaymentMethod) => {
    paymentMethod.pay(amount);
    console.log('Order placed successfully');
};

这样如果要添加新的支付方式，只需要实现PaymentMethod接口，而订单模块不需要修改。

使用工具管理依赖：在项目中使用npm或yarn来管理第三方库的依赖。在package.json文件中明确记录项目所依赖的库及其版本，确保团队成员使用相同版本的库，避免因版本差异导致的问题。同时，使用工具如webpack来处理模块打包，它可以分析模块之间的依赖关系，优化打包结果。

通过以上方式，利用TypeScript的模块系统和接口，可以使大型前端项目的代码结构清晰，依赖关系明确，易于维护和扩展。

星途面试题库

面试题：TypeScript在大型前端项目中的模块与接口设计

知识考点

面试题答案

1. 使用TypeScript模块系统组织代码

2. 使用接口确保类型安全和结构清晰

3. 确保依赖关系清晰