How to use Typescript global types declarations in Vue SFC?

user_1293297 0
Viewed 1248

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?

vuejs2 typescript
1 Answers

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

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