Как предоставить TSC определения машинописи для импорта URI?

Question

import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.esm.js'

Если я прошу TSC скомпилировать вышеизложенное, он жалуется (разумно) на неспособность найти определения для этого модуля.Тем не менее, я не могу понять, как дать TypeScript файл определения.declare module 'https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.esm.js' { ... } не работает, а https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.esm.js не является допустимым именем файла, поэтому я не могу создать файл с таким именем.Я попытался использовать tsconfig.json paths, но не смог заставить это работать.

Какая магия требуется, чтобы TypeScript принял мои определения типов Vue?

Примечание:идеальное решение будет работать с //cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.esm.js, ./vue.esm.js и ./vue.js.Последние два являются относительными путями, для которых я не могу понять, как обеспечить путь определения.

Answer 1

То, что вы просите, это:

stubs.d.ts

declare module 'https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.esm.js' {
  const Vue: typeof import ('vue');

  export default Vue;
}

Однако использование оператора импорта для загрузки модуля из CDN не являетсяидиоматический способ использования модулей - и ни один из пакетов не поддерживает это, по крайней мере, насколько мне известно.

Если вы хотите использовать Vue в качестве модуля, он должен быть установлен локально (npm install vue), а затем импортирован изваш локальный каталог node_modules.

import Vue from 'vue';

Если вы хотите использовать его в качестве пакета UMD (то есть, сделать так, чтобы браузер загружал его из CDN, а не из вашего пакета), вам нужно установитьнаборы и включите их в ваш проект.

Vue связывает свои файлы объявлений (*.d.ts) с фактическим исполняемым кодом, поэтому вы не можете устанавливать только типы.В любом случае вам необходимо загрузить весь пакет.

npm install vue

Добавьте определения установленных типов в ваш проект.В вашем tsconfig.json убедитесь, что "vue" включен в compilerOptions.types.

{
  "compilerOptions": {
    "types": ["vue"]
  }
}

Это позволит выставлять наборы глобально внутри ваших скриптов.