在TypeScript Node.js项目中无法获取绝对路径

Question

我正在尝试建立一个使用绝对路径而不是相对路径的简单typescript、node环境。

我按照这里的视频进行：https://www.youtube.com/watch?v=BKz7rnbQyK4，但是当我运行npm run start:dev时，无法正确解析绝对导入。VSCode智能提示可以很好地解析绝对导入路径，但是编译时会出现编译错误。

注意：相对路径编译和工作正常。但是绝对路径会产生编译错误。

这里是我的.nvmrc：

v16.15.1

这是我的代码结构：

这是我的简单代码：

src/index.ts:

import add from '@src/math/add';

console.log(add(2, 1));

这里@src/math/add出现编译错误。./math/add可以正常编译。

src/math/add.ts:

import force from '@src/science/physics';
const add = (a: number, b: number): number => {
  console.log(`force:${force(5, 3)}`);
  return a + b;
};
export default add;

这里的@src/science/physics出现了编译错误，但../science/physics可以正常编译。

src/physics/force.ts:

const force = (mass: number, accelaration: number): number => mass * accelaration;

export default force;

这是我的 tsconfig.json 文件。

{
  "ts-node": {
    "require": ["tsconfig-paths/register"],
    "esm": true,
    "experimentalSpecifierResolution": "node"
  },
  "exclude": ["node_modules", "dist", "coverage"],
  "include": ["src"],
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["DOM", "ESNext"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,


    /* JavaScript Support */
    "allowJs": true,

    /* Emit */
    "outDir": "dist",
    "removeComments": true,

    /* Type Checking */
    "strict": true,
    "noImplicitAny": true,

    /* Modules */
    "module": "ES2020",
    "moduleResolution": "node",
    "rootDir": "." /*meaning wherever is this tsconfig.json file, that is the root directory*/,
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"]
    },

    /* Interop Constraints */
    "isolatedModules": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,

    /* Completeness */
    "skipLibCheck": true
  }
}

这是我的package.json文件：

{
  "type": "module",
  "name": "express-proj-setup-tut",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "start:dev": "ts-node -r tsconfig-paths/register ./src/index.ts",
    "start:prod": "node -r ts-node/register/transpile-only -r tsconfig-paths/register ./dist/src/index.ts",
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^18.7.9",
    "@typescript-eslint/eslint-plugin": "^5.33.1",
    "@typescript-eslint/parser": "^5.33.1",
    "eslint": "^8.22.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^3.4.2",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^2.7.1",
    "ts-node": "^10.9.1",
    "tsconfig-paths": "^4.1.0",
    "typescript": "^4.7.4"
  }
}

最后，这是终端中的错误消息：

如果有人能帮我解决绝对路径的问题，我将非常感激。

谢谢

- aloha

Answer 1

我无法解决您在package.json与tsconfig.json中模块配置的问题，但是如果您从package.json中删除"type": "module"并在tsconfig.json中更改为"module": "CommonJS"，则可以运行"start:dev": "ts-node -r tsconfig-paths/register src/index.ts"。

对于我而言，输出如下：

force:15
3

相关问题：无法运行我的Node.js TypeScript项目，TypeError [ERR_UNKNOWN_FILE_EXTENSION]：在/app/src/App.ts的未知文件扩展名“.ts”

- Sergey Sosunov

---

谢谢您的评论。是的，我已经使用“module”：“CommonJS”使其工作，但是任何在package.json中需要“type”：“module”的内容（例如ES2015、ES2020）都无法编译绝对路径。很高兴知道我不是唯一遇到这个问题的人。VSCode智能感知可以很好地解决它。所以最可能的问题在于“start：dev”：“ts-node -r tsconfig-paths/register ./src/index.ts”。 - aloha

Answer 2

检查你的 Node.js 版本是否高于 14.6.0

如果有带有 TypeScript 代码的 ./src 文件夹和 tsc 的输出文件夹 ./dist，写入以下内容以将 ./src 映射为全局路径 #root：

// tsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    "paths": {
      "#root/*": [
        "./*"
      ]
    }
  }
}

// package.json
{
  ...
  "imports": {
    "#root/*": "./dist/*"
  },
}

这样的别名应该以#符号开头。

有用的链接：

• https://nodejs.org/api/packages.html#subpath-imports
• https://www.typescriptlang.org/tsconfig#paths

- Meowster

---

@Meoster 谢谢你的回答。 rootDir 配置为与 tsconfig.json 相同的位置，因此为“。”。baseUrl 也是如此。有了这些设置，VSCode 智能感知功能可以捕捉导入的模块并在鼠标悬停时显示它。此外，在开发环境中，我没有将其转换为 JavaScript，而是使用 ts-node。因此，在运行开发时不会生成 ./dist 文件夹。你认为错误在 package.json 中的 "start:dev": "ts-node -r tsconfig-paths/register ./src/index.ts" 吗？ - aloha

Answer 3

在你的 tsconfig.json 文件中，你需要进行修改。

"paths": {
      "@src/*": ["src/*"]
    },

对于这个：

"paths": {
      "@/*": [
        "src/*"
      ]
    },

而在include中，您需要添加所有包含ts文件的路径，就像这样：

"include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],

希望能解决编译错误 :-)

- Kiramishima

---

非常感谢您的回复。我按照您的建议操作了一遍，但错误仍然存在。奇怪的是，在VSCode中，eslint能够很好地解决这个问题，但编译器却有困难。 - aloha