Typescript: Support a 'vue' option for JSX in .tsx files

[yeluoqiuzhi]

[feature] Will typescript support compile tsx for vue.js?

[aluanhaddad]

It would be nice. https://github.com/vuejs/vue/issues/478

[yeluoqiuzhi]

@aluanhaddad That is about using typescript with vue.js. However, we want something that can compile tsx to js for vue.js.

It would look like this in tsconfig.json.

"jsx": "react",

When use it with vue.js, we should use by changing react to vue.

"jsx": "vue"

[davidmoshal]

+1

[aluanhaddad]

@yeluoqiuzhi I understand. The linked issue was also about using TypeScript with vue.js. I linked it to illustrate that there has been interest in this for a several years, and because it is an interesting discussion.
I think it would be great to see TypeScript's .jsx support leveraged by another framework.

[DanielRosenwasser]

Right now the emit is pretty different between React and Vue's JSX emit. See the documentation here that shows what Vue JSX is transformed to.

[yeluoqiuzhi]

Thanks. We would wait for typescript to support it, rather than use babel.

[HerringtonDarkholme]

IMHO, the most significant difference is type checking. We can already use Babel + TS to transform code, so that would not be the hard part for users. Yet type checking is much more convoluted.

There are many libraries in wild to support Vue's type checking before official solution. Adopting which model needs proposal. @yeluoqiuzhi should know.

Even if we do only accept official library, type checking props and emit, two main interfaces in Vue, requires many changes. Unlike React, Vue's props are declared on the class as properties. There is no such thing like reactComponent.props where TypeScript can use to check JSX. Currently official library uses decorators to annotate props.

For custom event, Vue's JSX requires onEvent prefix for camelCase binding or on-event prefix for kebab-case binding, while React has no such event handler: every thing is prop. TS checker needs additional checking here. Other things like ref, slot should also be checked since they are components' API as well.

Finally, I would like to see Vue support can be done by https://github.com/Microsoft/TypeScript/pull/10159. I would expect Vue will be hot in 2017, but what about 2018? 2019? As a language,supporting only some specified libraries feels partisan.

Edit: thank Daniel for referring related issue in TS. Actually I have considered the same question before and gave up due to cyclic dependency.

[DanielRosenwasser]

@HerringtonDarkholme see #12846 for general support of typing the Vue instance based on its input properties.

[andrei-markeev]

Would a PR be accepted that implements this?

[yeluoqiuzhi]

I have move to react stack for a year...

[andrei-markeev]

I've created a PoC and it seems to work pretty well. Successfully used it for compiling a medium sized application (~2000 lines of Vue.js templates).

Can someone from the core team decide if a PR will be considered for this feature, i.e. --jsx vue mode? Affects small part of code, doesn't affect language design. Should I finalize the work?

Screenshot of a basic test:

In case anyone wants to peek at the code (work in progress):
https://github.com/andrei-markeev/TypeScript/commit/56b951f5ae62e0eb06c0bf6d1459c3ec81752720

[david50407]

Although this issue is closed by author, I think there is still a good benefit to TypeScript and Vue.

How about re-open this issue? @aluanhaddad @DanielRosenwasser

[skyrpex]

Maybe we should open a new issue?

[wartmanm]

I rebased and updated @andrei-markeev's PoC: wartmanm@vue-jsx.
I haven't used it extensively yet, but it passes all of Vue's tests in babel-plugin-transform-vue-jsx.