如何在TypeScript中基于编译时表达式实现条件编译？

嘿，这个需求太常见了——很多跨平台前端项目（比如同时做网页和Tauri/Electron桌面端）都会遇到要根据构建环境切换后端通信逻辑的情况。在TypeScript里实现类似C/C++那种#ifdef的编译时条件编译，其实有几种实用的办法，我给你详细说说：

方法1：环境变量+构建工具注入（最省心） #

这是目前前端项目里最常用的方案，核心思路是通过构建工具（比如Vite、Webpack、Rollup）在编译时注入全局环境变量，然后在TypeScript代码里做条件判断，构建工具还能通过tree-shaking自动剔除无用分支。

步骤很简单：

1. 先在代码里声明全局变量的类型，让TypeScript识别它：

   // 可以放在全局类型文件里，比如global.d.ts
   declare const IS_WEBPAGE_BUILD: boolean;
   

2. 在构建工具里配置不同环境的变量值：
   • 比如用Vite的话，在vite.config.ts里的define选项配置：

     import { defineConfig } from 'vite';
     
     export default defineConfig(({ mode }) => {
       const isWebpage = mode === 'web';
       return {
         define: {
           IS_WEBPAGE_BUILD: JSON.stringify(isWebpage),
         },
       };
     });
     

3. 然后在业务代码里直接用这个变量做判断，TypeScript会自动做类型检查，构建时无用分支会被删掉：

   async function sendToBackend() {
     if (IS_WEBPAGE_BUILD) {
       // 网页环境下用fetch调用后端
       await fetch("/backend_service");
     } else {
       // Tauri/Electron环境下用对应API，比如Tauri的invoke
       await window.__TAURI__.invoke("backend_service");
     }
   }
   

这个方案的好处是类型安全、配置简单，几乎所有主流前端构建工具都支持，而且不会增加额外的工具链依赖。

方法2：按环境拆分文件（逻辑更清晰） #

如果不同环境的后端通信逻辑比较复杂，堆满条件判断会让代码变乱，那可以把逻辑拆分成不同的文件，然后根据构建环境导入对应的文件。

比如：

1. 创建两个逻辑文件：
   • 网页环境的实现：backend-communication.web.ts

     export async function sendToBackend() {
       await fetch("/backend_service");
     }
     

   • 桌面端环境的实现：backend-communication.desktop.ts

     export async function sendToBackend() {
       await window.__TAURI__.invoke("backend_service");
     }
     

2. 然后在主文件里通过环境变量动态导入，或者用构建工具的别名映射：

   // 方式1：动态导入（需要构建工具支持环境变量）
   import { sendToBackend } from `./backend-communication.${IS_WEBPAGE_BUILD ? 'web' : 'desktop'}.ts`;
   
   // 方式2：用Webpack/Vite的别名配置，比如在配置文件里把`./backend-communication`指向对应文件
   import { sendToBackend } from './backend-communication';
   

这种方法把不同环境的逻辑完全隔离，代码结构更清晰，适合复杂场景的维护。

方法3：用预处理器实现#ifdef语法（最接近传统编译方式） #

如果你真的想要和C语言一模一样的#ifdef语法，可以给TypeScript加预处理器支持，需要用到ts-patch和相关转换器。

步骤大概是：

1. 安装依赖：

   npm install ts-patch typescript-transformer-preprocessor --save-dev
   

2. 在tsconfig.json里配置转换器：

   {
     "compilerOptions": {
       "plugins": [
         {
           "transform": "typescript-transformer-preprocessor",
           "define": {
             "IS_WEBPAGE_BUILD": true // 可以根据环境动态设置，或者用构建工具传入
           }
         }
       ]
     }
   }
   

3. 然后在代码里直接写#ifdef语法：

   async function sendToBackend() {
     #ifdef IS_WEBPAGE_BUILD
       await fetch("/backend_service");
     #else
       await window.__TAURI__.invoke("backend_service");
     #endif
   }
   

这个方案完全满足你想要的#ifdef写法，但需要额外配置工具链，适合习惯传统编译时条件判断的开发者。

总的来说，方法1是大部分项目的首选，兼顾简单性和实用性；方法2适合逻辑复杂的场景；方法3则是追求语法一致性的选择，根据你的项目情况挑就行~

备注：内容来源于stack exchange，提问作者Zebrafish