Vue + TypeScript - Рекомендуемая структура структуры папок для размещения пользовательских типов?

Question

Существует ли рекомендуемое соглашение о том, где размещать файлы определения пользовательских типов в проекте Vue?

Я использовал папку с именем . / Src / types с этим типом tsconfig:

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

Кто-то сказал мне, что Vue или Webpack будут автоматически подбирать файлы в папке ./@types/, не добавляя их в . / Tsconfig.json - однако я это сделал не нашли ссылку на такую ​​информацию?

Answer 1

Согласно веб-сайту 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

Создайте файл index.d.ts внутри @types/index.d.ts и поместите в него код:

declare interface Foo {
    Bar: string;
}

В корневой папке создайте новый файл index.ts и в своем редакторе кода (например, VSCode) протестируйте его:

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

p.s: Неважно, поместите ли вы свой код в @types или нет, TypeScript автоматически найдет их. Вы также можете вручную определить путь для typeRoots, но не забудьте настроить его для поиска @types внутри node_modules.