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

Question

在Vue项目中放置自定义类型定义文件的位置上是否存在建议的约定？

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

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

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

Answer 1

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

@ types，typeRoots和类型

默认情况下，所有可见的“ @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

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