Vue + TypeScript - Recommended folder structure convention for placing custom typings?

Question

Is there a recommended convention in where to place your custom type definition files in a Vue project?

I've been using a folder named ./src/types with this kind of tsconfig:

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

Somebody told me that Vue or Webpack would pick up files in ./@types/ folder automatically without needing to add this to ./tsconfig.json - however, I did not find a reference to such information?

Answer 1

According to TypeScript website, TypeScript automatically loads types in folders if you have referenced them in your code.

@types, typeRoots and types

By default all visible “@types” packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible; specifically, that means packages within ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/, and so on.

If typeRoots is specified, only packages under typeRoots will be included. For example:

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

This config file will include all packages under ./typings, and no packages from ./node_modules/@types

You can easily test it like:

tc --init

Create a index.d.ts file inside @types/index.d.ts, and put code below in it:

declare interface Foo {
    Bar: string;
}

In the root folder, create a new index.ts file and inside your code-editor (Eg. VSCode), test it:

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

p.s: It doesn't matter if you put your code inside @types or not, TypeScript automatically will find them. You can manually define the path for typeRoots as well but don't forget to configure it to looks for @types inside node_modules.