Vue + TypeScript - 推荐用于放置自定义类型的文件夹结构约定？答案

【问题标题】：Vue + TypeScript - Recommended folder structure convention for placing custom typings?Vue + TypeScript - 推荐用于放置自定义类型的文件夹结构约定？
【发布时间】：2019-10-15 00:25:23
【问题描述】：

在 Vue 项目中放置自定义类型定义文件的位置是否有推荐的约定？

我一直在使用名为 ./src/types 的文件夹和这种 tsconfig：

{
  "compilerOptions": {
    ...
    "typeRoots": [
      "node_modules/@types",
      "types"
    ]
  }
}

有人告诉我，Vue 或 Webpack 会自动拾取 ./@types/ 文件夹中的文件，而无需将其添加到 ./tsconfig.json - 但是，我没有找到对此类信息的引用？

【问题讨论】：

标签： javascript typescript vue.js webpack directory-structure

【解决方案1】：

根据 TypeScript 网站，如果您在代码中引用了类型，TypeScript 会自动将类型加载到文件夹中。

@types, typeRoots and types

默认情况下，所有可见的“@types”包都包含在您的汇编。任何封闭文件夹的 node_modules/@types 中的包被认为是可见的；具体来说，这意味着包内 ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/，等等。

如果指定了 typeRoots，那么只有 typeRoots 下的包会被包括。例如：

{
   "compilerOptions": {
       "typeRoots" : ["./typings"]
   }
}

此配置文件将包含 ./typings 下的所有包，并且没有来自 ./node_modules/@types 的包

您可以像这样轻松测试它：

tc --init

在@types/index.d.ts 中创建一个index.d.ts 文件，并在其中放入以下代码：

declare interface Foo {
    Bar: string;
}

在根文件夹中，创建一个新的index.ts 文件并在您的代码编辑器（例如 VSCode）中进行测试：

let foo:Foo;
foo. // you can see code-completion

附注：不管你是否将代码放在@types 中，TypeScript 都会自动找到它们。您也可以手动定义 typeRoots 的路径，但不要忘记将其配置为在 node_modules 中查找 @types。

【讨论】：