CODEWITHSUNDEEP
vuejs2
Daniel
Daniel

Reputation: 35684

Disabling typescript type safety check in template

This is specific to vue js 2 (using 2.7) using typescript and volar extension

When using <script lang="ts"> the <template> content also gets typescript notifications even when the content does not support typescript

eg.

<my-component @change="(selection)=>doStuff(selection, index)"></my-component>

will show error (in the IDE, but compiles and works)

Parameter 'selection' implicitly has an 'any' type.ts(7006)

adding the type makes the code invalid, because the type is not parsed

<my-component @change="(selection:string)=>doStuff(selection, index)"></my-component>

Unexpected token, expected "," (1:429)

Upvotes: 2

Views: 3617

Answers (1)

Daniel
Daniel

Reputation: 35684

Hopefully this will help somebody facing the same issue

The 2.7 release blog post has these instructions for volar compatibility:

Volar Compatibility

2.7 ships improved type definitions so it is no longer necessary to install @vue/runtime-dom just for Volar template type inference support. All you need now is the following config in tsconfig.json:

{
  // ...
  "vueCompilerOptions": {
    "target": 2.7
  }
}

However, to suppress the typescript checking in templates, the use of experimentalDisableTemplateSupport option is required too

tsconfig.json:

  "vueCompilerOptions": {
    "target": 2.7,
    "experimentalDisableTemplateSupport": true
  },

Upvotes: 4

Related Questions