面试题：TypeScript工程化中如何基于类型系统实现代码的健壮性检查

Question

在一个复杂的TypeScript项目工程中，你会采取哪些基于类型系统的策略来确保代码的健壮性，比如如何防止类型错误在不同模块间传播，如何利用类型守卫等机制增强运行时类型安全性，详细说明思路及代码示例。

Answer 1

防止类型错误在不同模块间传播

1. 严格的接口和类型定义
   • 在每个模块中，对输入和输出的数据定义明确的接口或类型。例如，假设有一个用户信息模块，定义用户信息的接口：

   // user.ts
   export interface User {
       id: number;
       name: string;
       email: string;
   }
   
   export function getUser(): User {
       // 实际逻辑获取用户
       return {
           id: 1,
           name: 'John Doe',
           email: '[e-mail]'
       };
   }
   

   • 其他模块使用这个接口来确保数据类型的一致性。

   // anotherModule.ts
   import { User, getUser } from './user';
   
   function displayUser(user: User) {
       console.log(`User ID: ${user.id}, Name: ${user.name}, Email: ${user.email}`);
   }
   
   const user = getUser();
   displayUser(user);
   

2. 模块边界类型检查
   • 在模块的入口和出口进行类型断言。比如，从一个API获取数据并传递给其他模块时：

   // api.ts
   import { User } from './user';
   
   async function fetchUser(): Promise<any> {
       // 模拟API调用
       const response = await fetch('/api/user');
       return response.json();
   }
   
   async function getUserFromAPI(): Promise<User> {
       const data = await fetchUser();
       // 类型断言确保数据符合User接口
       return data as User;
   }
   

3. 使用泛型
   • 对于一些通用的模块，如数据处理工具模块，可以使用泛型来确保类型一致性。

   // dataUtils.ts
   function mapArray<T, U>(array: T[], callback: (item: T) => U): U[] {
       return array.map(callback);
   }
   
   // 使用
   const numbers = [1, 2, 3];
   const squared = mapArray(numbers, (num) => num * num);
   

利用类型守卫增强运行时类型安全性

1. 类型守卫函数
   • 定义一个函数来检查某个值是否符合特定类型。例如，检查一个值是否是字符串数组：

   function isStringArray(value: any): value is string[] {
       return Array.isArray(value) && value.every((item) => typeof item ==='string');
   }
   
   function processArray(value: any) {
       if (isStringArray(value)) {
           value.forEach((str) => console.log(str.length));
       } else {
           console.log('Not a string array');
       }
   }
   
   const myArray1 = ['a', 'b', 'c'];
   const myArray2 = [1, 2, 3];
   processArray(myArray1);
   processArray(myArray2);
   

2. in 操作符作为类型守卫
   • 当对象可能有不同的形状时，可以使用in操作符来进行类型守卫。

   interface Circle {
       radius: number;
   }
   interface Square {
       sideLength: number;
   }
   
   function drawShape(shape: Circle | Square) {
       if ('radius' in shape) {
           console.log(`Drawing a circle with radius ${shape.radius}`);
       } else {
           console.log(`Drawing a square with side length ${shape.sideLength}`);
       }
   }
   
   const circle: Circle = { radius: 5 };
   const square: Square = { sideLength: 4 };
   drawShape(circle);
   drawShape(square);
   

3. typeof 类型守卫
   • 常用于检查基本类型。

   function printValue(value: string | number) {
       if (typeof value ==='string') {
           console.log(`The string is: ${value}`);
       } else {
           console.log(`The number is: ${value}`);
       }
   }
   
   printValue('hello');
   printValue(10);