Subscribe on changes!

Script setup global directive TS -> error

avatar
Jul 2nd 2021

Version

3.1.3

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aDE e3sgbXNnIH19PC9oMT5cbiAgPGlucHV0IHYtYXV0b2ZvY3VzIC8 XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IHNldHVwPlxuY29uc3QgbXNnID0gJ0hlbGxvIFdvcmxkISdcbjwvc2NyaXB0PiJ9

Steps to reproduce

This happens when you use global directives, inside a script setup component, then compile with TS typechecking (and --strictNullChecks).

What is expected?

Everything compiles fine!

What is actually happening?

semantic error TS2322: Type 'Directive<any, any> | undefined' is not assignable to type 'Directive<any, any>'.
  Type 'undefined' is not assignable to type 'Directive<any, any>'.

I believe I know what the problem is.

The generated code looks like this:

// Directive<any, any> | undefined
const _directive_autofocus = _resolveDirective("autofocus");

// _withDirectives(..., [Directive])
return _withDirectives((_openBlock(), _createBlock("input", null, null, 512 /* NEED_PATCH */)), [
    [_directive_autofocus]
  ])

Basically _resolveDirective is typed as possibly undefined (understandable if the name isn't registered) but _withDirectives is typed as accepting Directive only, not undefined.

Fix ideas:

  • Ensure _withDirectives works with (ignores?) undefined directives.
  • Make _resolveDirective throw when the directive is not found and returns Directive<any, any>
  • Don't change any behavior but lie in type definitions to pretend _resolveDirective never returns undefined or _withDirectives accepts undefined.
avatar
Jul 2nd 2021

repro link seems broken.