typescript - 如何手动(本地)包含 .d.ts 文件？或者如何使用用户定义的 .d.ts 文件？

Question

我正在研究 nuxt.js，由于某些原因我想像这样扩展 Vue 的实例:

import Vue from 'vue'

Vue.prototype.$myProp = 'test'

const app = new Vue()

console.log(app.$myProp)

按照 https://v2.vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins 处的指南进行操作，我在 types/test.d.ts 创建了一个文件，内容如下:

declare module 'vue/types/vue' {
  interface Vue {
    $myProp: string;
  }
}

但是，我不知道如何让它工作。

我在我的 VSCode 中收到错误。当我执行 tsc(版本 3.7.2)时也收到错误:

index.ts:14:17 - error TS2339: Property '$test' does not exist on type 'CombinedVueInstance<Vue, object, object, object, Record<never, any>>'.

14 console.log(app.$test)

我尝试在根目录中使用 tsconfig.json，但不起作用:

{
    "compilerOptions": {
        "typeRoots": [
            "types/test.d.ts"
        ]
    }
}

我也试过像这样插入一个引用，但现在可以了:

///<reference path="types/test.d.ts"/>

当然，我不想在每个文件中都包含这个声明文件。有没有办法在整个项目中启用声明？

我不知道 VSCode 如何与 typescript 一起使用。也许我只是在配置文件中犯了一个错误。

Answer 1

typeRoots 是指目录，而不是文件。另外，它指的是包含类型包的文件夹。

A types package is a folder with a file called index.d.ts or a folder with a package.json that has a types field. - typescriptlang.org

通常这是 ./node_modules/@types 文件夹，这也是 typeRoots 选项的默认值。

对于您的情况，最好使用 include 选项而不是 typeRoots。

{
  "include": [
    "./types",
    /* other .ts or .d.ts source code containing folders here */
  ],
  "compilerOptions": { ... }
}