不工作的tsconfig路径

Question

我试图在文档中做一些与jquery路径示例非常相似的事情，但是TS总是抛出TS2307 (webpack编译得很好)：

"compilerOptions": {
    "baseUrl": "./src",
    "paths": {
        "@client": [
            "client",
        ],
        "@suir": [
            "../node_modules/semantic-ui-react/dist/commonjs", // not working
        ],
    },
    // …
},
"include": [
    "*.d.ts",
    "client/**/*",
    "../node_modules/semantic-ui-react", // is this necessary?
],

将baseUrl更改为"."并更新includes和paths没有任何区别(@client继续工作，@suir继续无效)。

将"@suir"更改为"@suir/"或"@suir/*" (并将/*附加到其值)也没有什么区别。

我这样做的原因是简化我的导入(我是显式地指定它们，而不是从包中提取指定的导出，以减少我的供应商包大小-节省大约1MB)：

import Button from 'semantic-ui-react/dist/commonjs/elements/Button'; // works

import Button from '@suir/elements/Button'; // not found

Answer 1

我不知道为什么在我第十一次尝试的时候(但没有使用前10次)，但是/*似乎是一个秘密，而文档中的例子显然是指向一个特定的文件(文件扩展名被省略了)。

{
    "compilerOptions": {
        "baseUrl": "./src", // setting a value for baseUrl is required
        "moduleResolution": "node", // was not set before, but is the default
        "paths": {
            "@client/*": [
                "client/*",
            ],
            "@suir/*": [ // notice the `/*` at the end
                "../node_modules/semantic-ui-react/dist/commonjs/*", // notice the `/*`
            ],
        },
        // …
    },
    "include": [
        "./src/client/**/*",
    ],
}

Answer 2

正如翟爱丽在注释中提到的，这有时只需要重新启动语言服务器。

在VSCode中，您可以按Cmd/Ctrl + Shift + P并搜索Typescript: Restart TS Server。

重新开始后，一切都开始为我工作了。

Answer 3

我也曾与.tsconfig做过斗争，没有识别我的别名(而在另一个项目中，它应该具有完美的保存配置)。

事实证明，这是一个新手错误:我将paths支柱放在JSON对象的末尾，但它必须是compilerOptions部件的嵌套属性：

// This does't work ❌
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
     //...
    "baseUrl": ".",
  },
  "include": ["next-env.d.ts", "twin.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
  "paths": {
      "@components/*": ["components/*"],
      "@lib/*": ["lib/*"]
    }
}

// This should work ✅
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
     //...
    "baseUrl": ".",
    "paths": {
      "@components/*": ["components/*"],
      "@lib/*": ["lib/*"]
    }
  },
  "include": ["next-env.d.ts", "twin.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
}