Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question on the general TypeScript support in Vue 3 #64

Open
sqal opened this issue Jun 25, 2019 · 6 comments

Comments

Projects
None yet
7 participants
@sqal
Copy link

commented Jun 25, 2019

Hi. I have a few questions regarding TypeScript support that will come along with Vue 3.0. I wanted to ask them originally in #42 but I thought my comment would quickly disappear in that thread and maybe other people will have a similar questions so I hope you don't mind me opening a new issue here.

In the section Type Inference you briefly described how type inference will work in the script tag, but all the examples presented there touches only functions composition, type checking props. What I'd like to know is if/how TS will generally work in other parts of Single File Components.

Questions I have at the moment:

  1. Will type inference work in the templates of our .vue components?
    I guess during development Vetur for VS Code will help us with that, but how will it work during compile time?
  2. Will it be possible to have things like refs, slots strongly typed?

Thank you for reply. I really appreciate it :)

@fuafa

This comment has been minimized.

Copy link

commented Jun 25, 2019

I think type inference in template interpolation is related to vuejs/vetur

@beeplin

This comment has been minimized.

Copy link

commented Jun 25, 2019

@sqal I share the concern with you. :) Previously I tend to choose render functions rather than templates, in order to get full type inference support. However, in vue 3.0 templates will get more performance optimization and generally will be faster then hand-written render functions. That puts typing support in templates vital for me.

@yyx990803

This comment has been minimized.

Copy link
Member

commented Jun 26, 2019

I just confirmed with @octref (author of Vetur) a few days ago - Vetur will be able to leverage the type information of the <script> section to provide autocompletion and type inference in <template>.

@ktsn

This comment has been minimized.

Copy link
Member

commented Jun 26, 2019

There is already working feature in Vetur for template type checking https://vuejs.github.io/vetur/interpolation.html. And we are planning to make it work on compile time.

As for template type checking, it is still behind an experimental flag. It would be appreciated if you feedback about it. 🙂

@octref

This comment has been minimized.

Copy link
Member

commented Jun 26, 2019

how will it work during compile time?

Vetur will have a CLI version where you can get diagnostics. Normally you would be using one of the editor integration based on VLS so you don't have to run this separately, but you do have the option.

I don't think putting type-checking into the webpack compilation chain (if that's what you mean by "compile time") is an good idea:

  • It doesn't have a good place to surface diagnostics. I hate browser overlays for displaying errors. Editor is the most natural place to surface errors.
  • There's a lot of integrations I have to do directly on TypeScript API for this to work. Doing that all under webpack or a webpack loader is impractical.

But you can put the Vetur CLI as part of your CI.

image

refs, slots strongly typed?

You need to be more specific.

@Raiondesu

This comment has been minimized.

Copy link

commented Jul 1, 2019

@octref, for example, let's image the following component:

// some-component.vue
<template>
  <section class="some-component">
    <some-input ref="someInput"/>
  </section>
</template>

<script>
import SomeInput from 'components/some-input.vue';

export default {
  components: { SomeInput }
  setup(props, context) {
   context.refs.someInput; // Can `someInput` here have the type of SomeInput imported above?
  }
}
</script>

The thing is that it most likely requires type inference not from pre-set types, but direct type extension of the component from the Vetur's side.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.