面试题：TypeScript模块系统优化与设计

优化思路

合理设计模块结构
- 功能模块化：将不同功能封装到独立模块中，例如一个电商项目，将用户登录、商品展示、购物车等功能分别放到不同模块。
- 分层架构：按业务逻辑分层，如表现层、业务逻辑层、数据访问层。表现层模块负责界面展示，业务逻辑层处理业务规则，数据访问层负责与后端交互。
处理模块间的导入导出以减少不必要的加载
- 按需导入：只导入实际使用的函数、类或变量。例如，如果模块mathUtils有add和subtract函数，而当前模块只使用add，则import { add } from './mathUtils';。
- 动态导入：对于一些不常用或按需加载的模块，使用动态导入。在React项目中，对于路由组件懒加载，const MyComponent = React.lazy(() => import('./MyComponent'));。
利用TypeScript的类型系统确保模块交互的正确性
- 明确类型定义：在模块的接口、函数参数和返回值处明确类型。例如，定义一个函数接收两个数字返回一个数字function add(a: number, b: number): number { return a + b; }。
- 使用类型别名和接口：对于复杂数据结构，使用类型别名或接口定义。如type User = { name: string; age: number };，在模块间传递用户数据时可确保数据结构一致。

代码示例

功能模块化示例
- userService.ts

// 用户服务模块
export function login(username: string, password: string): boolean {
    // 模拟登录逻辑
    return username === 'admin' && password === '123456';
}

- `main.ts`

import { login } from './userService';
const result = login('admin', '123456');
console.log(result);

按需导入示例
- mathUtils.ts

export function add(a: number, b: number): number {
    return a + b;
}
export function subtract(a: number, b: number): number {
    return a - b;
}

- `calculator.ts`

// 只需要add函数
import { add } from './mathUtils';
const sum = add(5, 3);
console.log(sum);

动态导入示例（以Webpack和React为例）
- MyComponent.tsx

import React from'react';
const MyComponent: React.FC = () => {
    return <div>这是MyComponent</div>;
};
export default MyComponent;

- `App.tsx`

import React, { lazy, Suspense } from'react';
const MyComponent = lazy(() => import('./MyComponent'));
function App() {
    return (
        <Suspense fallback={<div>加载中...</div>}>
            <MyComponent />
        </Suspense>
    );
}
export default App;

利用类型系统示例
- data.ts

// 定义接口
export interface Product {
    id: number;
    name: string;
    price: number;
}
export function getProduct(): Product {
    return { id: 1, name: '示例商品', price: 100 };
}

- `display.ts`

import { Product, getProduct } from './data';
function displayProduct(product: Product) {
    console.log(`商品名称: ${product.name}, 价格: ${product.price}`);
}
const product = getProduct();
displayProduct(product);

星途面试题库

面试题：TypeScript模块系统优化与设计

知识考点

面试题答案

优化思路

代码示例