Typescript 路径模块解析不起作用

Question

我正在使用 Express JS 和 Typescript。我正在尝试实现模块化模式。

tsconfig.json

{
 "include": ["src"],
 "exclude": ["node_modules"],
 "compilerOptions": {
   "target": "es2016",
   "module": "commonjs",
   "rootDir": "./src",
   "moduleResolution": "node",
   "baseUrl": "./src",
   "paths": {
     "@src/*": ["src/*"]
   },
   "outDir": "./dist",
   "esModuleInterop": true,
   "forceConsistentCasingInFileNames": true,
   "strict": true,
   "skipLibCheck": true
 }
}

src/modules/student/student.interface.ts

export type UserName = {
    firstName: string;
    //...
  };
  
  export type Guardian = {
    fatherName: string;
    //...
  };
  
  export type LocalGuardian = {
    name: string;
    //...
  };
  
  export type Student = {
    id: string;
    name: UserName;
    guardian: Guardian;
    localGuardian: LocalGuardian;
    //...
  };
  

src/modules/student/student.module.ts

import { Guardian, LocalGuardian, Student, UserName } from './student.interface'; 

以上效果很好

import { Guardian, LocalGuardian, Student, UserName } from '@src/student/student.interface'; 

上面显示错误：找不到模块'@src/student/student.interface'或其相应的类型声明。

我想使用 @src 执行导入。

如何使用模块化路径分辨率来做到这一点？

Answer 1

将

baseUrl

设置为

./src

意味着 TypeScript 开始从

src

文件夹中查找文件。然后，当我们使用

@src/

导入文件时，TypeScript 会尝试在

src

文件夹中查找它们，但这不是该文件夹所在的位置。通过将

baseUrl

更改为

./

，TypeScript 开始从项目的主文件夹进行搜索。这样，当我们在导入中使用

@src/

时，TypeScript 就知道在整个项目中搜索

src

文件夹。

{
  "include": ["src"],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "./src",
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@src/*": ["src/*"]
    },
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

所以，当您导入文件时，您可以使用

@src

快捷键，如下所示：

import { Guardian, LocalGuardian, Student, UserName } from '@src/modules/student'