Node.js项目启用TypeScript与JS混合开发遇问题求助

一、SyntaxError: Unexpected token ':' 错误解决 #

原因 #

Node.js默认只能执行JavaScript代码，无法识别TypeScript的类型标注语法（比如参数后的: string）。你直接在JS文件中require("./Example.ts")，相当于让Node去解析未编译的TS源码，自然会触发语法错误。

解决方案 #

1. 先编译TS文件：确保执行tsc命令，将TS代码编译到tsconfig.json指定的outDir（即./tsOutput）目录下。
2. 引用编译后的JS文件：修改JS调用代码，指向编译后的JS文件，同时注意TS默认导出的处理：

   // 原错误代码：const { Example } = require("./Example.ts");
   const Example = require("./tsOutput/Example.js").default; // 改用编译后的JS，取default属性
   
   function TypescriptConsumerExample() {
     const blah = new Example();
     blah.logSomeStuff("String", 2, false);
   }
   
   module.exports = TypescriptConsumerExample;
   

二、TypeError: TSTest is not a function 错误解决 #

原因 #

TS的export default TSTest编译为CommonJS后，导出结构是{ default: TSTest }。如果直接用const TSTest = require("./path/to/TSTest")，拿到的是整个导出对象，而非函数本身，调用时就会报错。

解决方案 #

有两种可选方式：

1. 导入时取default属性：

   const TSTest = require("./tsOutput/TSTest.js").default;
   TSTest(); // 正常调用
   

2. TS改用CommonJS风格导出：和现有JS代码的导出方式保持一致，避免默认导出的适配问题：

   function TSTest() {
     console.log("Success!");
   }
   
   module.exports = TSTest; // 替换export default为CommonJS导出
   

   此时JS中可直接正常导入：

   const TSTest = require("./tsOutput/TSTest.js");
   TSTest();
   

三、优化项目配置与流程建议 #

1. 调整tsconfig.json范围：避免编译无关文件，规范源码目录：

   {
     "compilerOptions": {
       "target": "es6",
       "module": "commonjs",
       "sourceMap": true,
       "rootDir": "./src", // 将TS源码统一放到src目录
       "outDir": "./tsOutput",
       "strict": true,
       "moduleResolution": "node",
       "esModuleInterop": true,
       "forceConsistentCasingInFileNames": true
     },
     "include": ["./src/**/*"],
     "exclude": ["node_modules", "tsOutput"]
   }
   

2. 添加npm脚本：方便一键编译和开发：

   {
     "scripts": {
       "build": "tsc",
       "dev": "ts-node-dev src/index.ts" // 开发时自动重启TS服务
     }
   }
   

3. 测试文件处理：如果需要直接运行TS测试代码，使用ts-node执行：

   npx ts-node test/TSConsumerExample.test.js
   

内容的提问来源于stack exchange，提问作者Joshua Mee