如何在tsconfig中添加子目录模块别名？

你提到的这种带命名空间的别名映射（比如@myapp/api/*指向services/myapp/*），在你当前的TypeScript 3.4.3和VSCode 1.33.1环境下，不需要修改物理目录、也不需要第三方依赖就能正常生效，具体细节和验证方式如下：

配置核心要点 #

TypeScript的paths配置本身就支持这种嵌套/命名空间风格的别名规则，只要确保以下几点：

1. 保持正确的baseUrl
   你的baseUrl设置为./app是正确的，所有paths里的目标路径都是相对于这个baseUrl来解析的，不需要调整。

2. 编写正确的映射规则
   你给出的配置完全符合TS的要求：

   "baseUrl": "./app",
   "paths": {
     "assets/*": ["assets/*"],
     "components/*": ["components/*"],
     "@myapp/api/*": ["services/myapp/*"],
     "@myapp/state/*": ["state/*"]
   }
   

   这里的规则逻辑很清晰：

   • @myapp/api/xxx会被TS解析为./app/services/myapp/xxx
   • @myapp/state/xxx会被解析为./app/state/xxx
     完全满足你把部分内容按模块命名空间提取的需求，而且完全不需要改动实际的文件目录结构。

3. 确保VSCode使用项目本地的TS版本
   你的VSCode 1.33.1默认可能自带某个TS版本，但为了让别名配置的智能提示、跳转完全生效，建议切换到项目本地安装的TypeScript 3.4.3：

   • 点击VSCode右下角的TS版本号（比如显示"TypeScript x.x.x"）
   • 在弹出的菜单中选择"Use Workspace Version"（也就是你项目node_modules里的3.4.3）

验证配置是否生效 #

可以在代码里写一行测试导入：

import { MyApiService } from '@myapp/api/services'

如果VSCode没有报错，并且按住Ctrl点击@myapp/api/services能跳转到对应的./app/services/myapp/services.ts（或对应文件），同时tsc编译也没有模块找不到的错误，就说明配置已经正常工作了。

内容的提问来源于stack exchange，提问作者Can Poyrazoğlu