comparison with other vue typescript libraries

Hi, am moving our discussion from the vue-typescript issues,
seems like vue-typescript is dormant at Vue 1.x, so am looking for an alternative.

am wondering how av-ts project compares with:

• https://libraries.io/npm/vue-typescript-component
• https://github.com/vuets/vuets

David

[HerringtonDarkholme]

Hi David, thanks for giving av-ts a look.

This is my repo, so pardon me for being showy.

I have seen a lot of vue’s typescript binding libraries, so below is my own observation.

1. Compatibility

All of the three libraries, vue-typescript-component, vuets and av-ts, have good support for Vue2 and TS2. So there is not much to compare here. (vuets has vue1.0 support while the other two do not)

2. Extensibility

I think this the best part of av-ts. av-ts provides a Component.register for custom decorator. For example, if you want to use vuex in your project but also want to preserve type safety, you can create your own decorator. This is exactly what I do in kilimanjaro, a typed vuex fork. vue-ts-copmonent does not provide extensibility at all. vue-ts has the same extensibility as original vue because it uses object literal style (that is, the most extensible one among the three). However, vuets also support class component like syntax. Mixing two style is somewhat confusing.

3. Idiom

av-ts and vue-ts-component are both idiomatic TypeScript code. class/property/component just feel like plain-old-typescript. vue-ts chooses object literal style API. While it looks most similar to original vue, it is not as idiomatic as the other two. Also, object literal style requires many manual typing annotation, which feels foreign to both JavaScript and TypeScript.

4.Conciseness

vue-ts is most verbose as mentioned above. Object literal style API is almost impossible to have good type inference for contemporary compilers. You can read more about it here. Basically I think vue-ts is not an ideal approach. av-ts and vue-ts-component are concise. Most methods/properties require only annotating once. av-ts requires more decorators for special methods like render/lifecycle, while it has a more concise and type safe property syntax. So I think this is a tie.

5. Type Safety

av-ts and vue-ts-component can inject Vue’s native types by extends Vue. Neat. vuets users have to re-annotate all the method again. Alas. av-ts has more type safety when defining special methods like render, lifecycle and transition. This is powerer by new decorators introduced. Again, these decorators are created by Component.register and the implementation is not hard-coded into one file.

6. Expressiveness

vuets is as expressive as original vue, at the cost of more annotation. vue-ts-component can express most basic API in vue, but there is something it cannot. av-ts can use mixin and can use props in data method. I have thought over these scenarios before hand.

Conclusion

av-ts may not be the best component library for vue, but I believe it strikes the sweet point between conciseness, type safety and expressiveness. I’m happy to see more TS+Vue users try it out, and give me feedback so it can become better.

[HerringtonDarkholme]

No, please use vue-class-component. It is officially supported.