如何让ts-node优先导入.ts文件而非同名.js文件？

问题场景 #

我有一个ESM规范的sayhi.ts模块：

const sayhi = () => 'hi in typescript';
export default sayhi;

还有一个同名的CommonJS规范的sayhi.js文件：

const sayhi = () => 'hi in javascript';
module.exports = sayhi;

当使用ts-node运行index.ts时：

import sayhi from "./sayhi";
console.log(sayhi()); // 返回'hi in javascript'

发现总是导入sayhi.js而非sayhi.ts。需要让ts-node或ts-node-dev在开发环境下优先导入.ts文件，当前tsconfig.json配置如下：

{
    "compilerOptions": {
        "target": "esnext",
        "jsx": "react",
        "module": "commonjs",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
    }
}

解决方案 #

方法1：调整tsconfig.json的解析配置 #

在compilerOptions中添加resolveExtensions并调整moduleResolution，让TypeScript优先查找.ts文件：

{
    "compilerOptions": {
        "target": "esnext",
        "jsx": "react",
        "module": "commonjs",
        "moduleResolution": "nodenext", // 或使用"bundler"（适用于TypeScript 5+）
        "resolveExtensions": [".ts", ".js", ".json"], // 把.ts放在最前面，提升优先级
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
    }
}

方法2：使用ts-node的ESM模式运行 #

如果项目可以切换到ESM规范，按以下步骤操作：

1. 在package.json中添加"type": "module"：

{
  "type": "module"
}

2. 修改tsconfig.json的module配置：

"module": "esnext"

3. 运行ts-node时加上--esm参数：

ts-node --esm index.ts

方法3：导入时明确指定.ts后缀 #

直接在导入语句中指定文件后缀，强制导入.ts文件：

import sayhi from "./sayhi.ts";

方法4：给ts-node-dev指定解析优先级 #

运行ts-node-dev时，通过--resolve-extensions参数指定解析顺序：

ts-node-dev --resolve-extensions .ts,.js index.ts

内容的提问来源于stack exchange，提问作者Magdi Gamal