如何手动（本地）包含 .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指的是目录，而不是文件。另外，它指的是包含类型 packages的文件夹。

types 包是一个包含名为 index.d.ts 的文件的文件夹，或者是一个包含具有 types 字段的 package.json 的文件夹。- typescriptlang.org

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

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

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