面试题：JavaScript与TypeScript集成实践中的类型安全边界处理

Question

在将JavaScript项目逐步迁移到TypeScript的过程中，不可避免地会存在JavaScript与TypeScript代码交互的边界。比如，在JavaScript模块调用TypeScript编写的函数时，如何保证传递的参数类型符合TypeScript定义的要求，并且在TypeScript函数返回值被JavaScript模块使用时，能正确处理类型。请详细说明从设计模式、工具链配置等方面的最佳实践，并举例说明如何避免常见的类型安全问题。

Answer 1

设计模式

1. 类型定义文件（.d.ts）：
   • 为JavaScript代码创建.d.ts文件，用于描述JavaScript模块的类型。例如，有一个JavaScript模块mathUtils.js：

   // mathUtils.js
   function add(a, b) {
       return a + b;
   }
   module.exports = {
       add
   };
   

   可以创建mathUtils.d.ts文件来描述其类型：

   // mathUtils.d.ts
   declare function add(a: number, b: number): number;
   declare const mathUtils: {
       add: typeof add;
   };
   export = mathUtils;
   

   这样在TypeScript中调用mathUtils.add时，就能进行类型检查。
2. 接口隔离原则：
   • 在TypeScript代码中定义接口，通过接口来约束参数和返回值类型。例如，定义一个接口用于描述用户信息：

   // user.ts
   export interface User {
       name: string;
       age: number;
   }
   export function greetUser(user: User) {
       return `Hello, ${user.name}! You are ${user.age} years old.`;
   }
   

   在JavaScript中调用时，确保传递的对象符合User接口的结构。

   const user = {
       name: 'John',
       age: 30
   };
   const { greetUser } = require('./user.js');
   const greeting = greetUser(user);
   console.log(greeting);
   

工具链配置

1. Babel 配置：
   • 如果使用Babel，需要配置@babel/plugin - transform - typescript插件来处理TypeScript代码。同时，可以使用@babel/preset - env来处理ES6+语法转换。
   • 例如，在.babelrc文件中：

   {
       "presets": [
           [
               "@babel/preset - env",
               {
                   "targets": {
                       "node": "current"
                   }
               }
           ]
       ],
       "plugins": ["@babel/plugin - transform - typescript"]
   }
   

2. TypeScript 配置（tsconfig.json）：
   • 设置allowSyntheticDefaultImports为true，以允许从没有默认导出的模块中进行默认导入，这在JavaScript与TypeScript混合使用时很有用。
   • 设置esModuleInterop为true，它会为CommonJS模块创建命名空间包装器，有助于解决CommonJS和ES6模块之间的兼容性问题。

   {
       "compilerOptions": {
           "allowSyntheticDefaultImports": true,
           "esModuleInterop": true,
           "module": "commonjs",
           "target": "es6",
           "outDir": "./dist",
           "rootDir": "./src"
       }
   }
   

避免常见类型安全问题

1. 明确类型断言：
   • 在JavaScript中调用TypeScript函数时，有时需要明确类型断言。例如，有一个TypeScript函数parseJSON：

   export function parseJSON<T>(json: string): T {
       return JSON.parse(json);
   }
   

   在JavaScript中调用：

   const { parseJSON } = require('./jsonUtils.js');
   const json = '{"name":"Alice","age":25}';
   const user = parseJSON(json) as { name: string; age: number };
   console.log(user.name);
   

   这里通过as进行类型断言，确保parseJSON返回值的类型符合预期。
2. 使用类型守卫：
   • 在TypeScript函数中，可以使用类型守卫来确保返回值类型的正确性。例如：

   export function getValue<T>(obj: { [key: string]: T }, key: string): T | undefined {
       if (obj.hasOwnProperty(key)) {
           return obj[key];
       }
       return undefined;
   }
   

   在JavaScript中调用时，能正确处理可能的undefined返回值：

   const { getValue } = require('./objectUtils.js');
   const obj = { message: 'Hello' };
   const value = getValue(obj,'message');
   if (value!== undefined) {
       console.log(value);
   }