How to use Typescript global types declarations in Vue SFC?

问题

In Vue2 + Typescript project I have global.d.ts file with some types like that:

global.d.ts

type Nullable<T> = T | undefined | null;

It works fine (without explicitly types export/import) when using in regular .ts files:

misc.ts

const answer: Nullable<Answer> = null;

But it doesn't work inside .vue files:

component.vue

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data: () => ({
    answer: null as Nullable<Answer> // 'Nullable' is not defined
  })
});
</script>

Tripple slash thing doesn't work too:

<script lang="ts">
/// <reference path="../../types/global.d.ts" />

import Vue from 'vue';

export default Vue.extend({
  data: () => ({
    answer: null as Nullable<Answer> // 'Nullable' is not defined
  })
});
</script>

Is there any solution for this?

回答1:

I solved that by adding path to my directory with global.d.ts file in tsconfig.json:

{
  "compilerOptions": {
    "typeRoots": [
      "./types"
    ]
  }
}

来源：https://stackoverflow.com/questions/64662701/how-to-use-typescript-global-types-declarations-in-vue-sfc