[Vuejs]-Vue + TypeScript – Recommended folder structure convention for placing custom typings?

by

3👍

✅

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.

👤Ali Bahrami

Leave a comment