面试题：TypeScript第三方库类型定义的模块与兼容性

Question

假设你正在开发一个用于Node.js和浏览器环境的TypeScript第三方库类型定义，如何处理不同环境下的模块导入导出差异以及类型兼容性问题？请详细阐述思路并给出关键代码示例。

Answer 1

处理思路

1. 模块导入导出差异
   • Node.js环境：Node.js使用CommonJS规范，通过exports或module.exports导出，使用require导入。
   • 浏览器环境：现代浏览器支持ES模块，通过export导出，import导入。
   • 为了统一，可以使用工具将代码转换为不同模块系统支持的形式。在TypeScript中，可以通过设置tsconfig.json中的module字段，如commonjs（对应Node.js）和esnext（对应浏览器ES模块），然后使用工具如rollup或webpack进行打包转换。
2. 类型兼容性问题
   • 环境特定类型：Node.js和浏览器有各自特定的全局对象和类型。例如，Node.js有process，浏览器有window。可以通过条件编译（如#ifdef类似的方式，在TypeScript中可以通过@ts - ignore结合环境变量判断等）来处理特定环境的类型。
   • 依赖类型：确保第三方库的类型定义与不同环境兼容。如果使用了某些仅在Node.js或浏览器中可用的库，要对导入的类型进行适当的处理，比如使用@types定义的类型，并根据环境进行调整。

关键代码示例

1. 统一导出代码
   • 在TypeScript库代码中，使用ES模块风格的导出：

// myLib.ts
export function myFunction() {
    return 'This is my function';
}

2. tsconfig.json配置
   • 对于Node.js环境，tsconfig.json可以这样配置：

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "outDir": "dist/node",
        "declaration": true
    }
}

• 对于浏览器环境，tsconfig.json配置可以是：

{
    "compilerOptions": {
        "target": "es6",
        "module": "esnext",
        "outDir": "dist/browser",
        "declaration": true
    }
}

3. 处理环境特定类型
   • 例如，处理Node.js的process变量：

// myLib.ts
let envInfo: string;
if (typeof process!== 'undefined') {
    envInfo = `Node.js env: ${process.env.NODE_ENV}`;
} else {
    envInfo = 'Browser env';
}

4. 打包配置（以rollup为例）
   • Node.js版本：

// rollup.config.node.js.js
import typescript from '@rollup/plugin - typescript';
export default {
    input: 'src/myLib.ts',
    output: {
        file: 'dist/node/myLib.js',
        format: 'cjs'
    },
    plugins: [typescript()]
};

• 浏览器版本：

// rollup.config.browser.js
import typescript from '@rollup/plugin - typescript';
export default {
    input: 'src/myLib.ts',
    output: {
        file: 'dist/browser/myLib.js',
        format: 'es'
    },
    plugins: [typescript()]
};