Improve Vue type declarations for more canonical usage #5887

DanielRosenwasser · 2017-06-14T23:07:28Z

This PR improves the Vue .d.ts files so that users can get some improved inference when using the noImplicitThis compiler option. It takes advantage of many of the features the TypeScript team has been working on over the last few versions. Thus, it requires a minimum TypeScript version of 2.4. You can get this working with the current typescript@next (which is 2.5.0-dev.20170614, but don't let that version number fool you - this will work with the final release of 2.4).

The best part about this change is that it makes using Vue easier when users choose not to use classes and inheritance. In other words, users and can more easily new up an instance using the Vue constructor, and can create components using the Vue.extend and Vue.component APIs a little more naturally. Extending Vue as a class will still work, so if you prefer to use vue-class-component and the rest, that should still work! However, those dependencies may need to be updated for this change.

There's definitely some amount of complexity that's been introduced but I'm willing to iterate on this with the help of others. Given the feedback that we've heard on TypeScript-Vue-Starter, it's been a positive experience for users.

Fixes many of the issues users have asked about in #478.

Tests are probably failing at this point because I need to update the project's dependency on TypeScript.

… as members from 'data' and the Vue instance.

…Vue instance members.

…s, got rid of AnyVue.

Conflicts: types/vue.d.ts

Conflicts: types/options.d.ts types/test/options-test.ts types/test/vue-test.ts types/vue.d.ts

yyx990803 · 2017-06-15T04:34:32Z

Thanks @DanielRosenwasser ! Are there any remaining incompatibilities aside from the need for using latest dependancies, e.g. required change in tsconfig?

Also this would cover #5016 as far as I can tell.

HerringtonDarkholme · 2017-06-15T04:53:26Z

hmmm, the test is failing.

It seems Base constructor return type 'CombinedVueInstance<Data, Methods, Computed, Record<PropNames, any>>' is not a class or interface type..

So interface augmentation fails.

HerringtonDarkholme · 2017-06-15T06:05:17Z

types/options.d.ts

  propsData?: Object;
-  computed?: { [key: string]: ((this: V) => any) | ComputedOptions<V> };
-  methods?: { [key: string]: (this: V, ...args: any[]) => any };


We might also need methods?: ThisType<Methods & Computed & Pops & Data> to fully capture Vue's this instance.

I haven't try it myself, but will it cause cyclic reference?

I haven't try it myself, but will it cause cyclic reference?

There are a few problems that potentially come up if you try to reference methods from data in which you'll have to have an explicit annotation on data(). But we can be prescriptive and tell people to just use functions when you need to operate on data in some way.

We might also need methods?: ThisType<Methods & Computed & Pops & Data> to fully capture Vue's this instance.

@HerringtonDarkholme that's not actually necessary. When a method needs its this type, it will walk up each contextually typed object literal until it finds one that had a contextual type consisting of ThisType. If it does, it uses it. If not, it uses the innermost object literal's contextual type, and if there isn't one it just uses the type of the containing literal.

You should definitely try it out!

Tried it locally. It works like charm!

Sorry for the wrong reporting. ~~I only tried accurateVueType in vetur, which seems to wrongly configured. I will investigate more in vetur.~~

Vetur's issue is caused by ComponentOption's type arg.

DanielRosenwasser · 2017-06-15T06:38:41Z

@yyx990803 the fact that ComponentOptions used to be generic on 1 type arg, and now has 4 unrelated type arguments, will cause some incompatibilities. That's the main one you'll run into with vue-class-component.

DanielRosenwasser · 2017-06-15T06:58:26Z

The build should now be fixed.

ktsn

This is awesome work! 👍
I badly wanted to use Vue.js with TypeScript on the native syntax 😄

BTW, we may also need to update vue-server-renderer types since it's depends on the core types.

ktsn · 2017-06-15T15:04:56Z

types/vue.d.ts

+
+export type CombinedVueInstance<Data, Methods, Computed, Props> = Data & Methods & Computed & Props & Vue;
+export type ExtendedVue<Constructor extends VueConstructor, Data, Methods, Computed, Props> =
+  (new (...args: any[]) => CombinedVueInstance<Data, Methods, Computed, Props>) &


As ExtendedVue is a sub-class of the Vue constructor, we can expect the constructor signature would only receive one argument like below?

new (options: any) => CombinedVueInstance<Data, Methods, Computed, Props>

Not sure whether we could annotate the options with ThisTypedComponentOptionsWithArrayProps etc. since the type declaration might be so complicated 😂

As ExtendedVue is a sub-class of the Vue constructor, we can expect the constructor signature would only receive one argument like below?

@ktsn ExtendedVue creates an intersection with the mixin constructor (new (...args: any[]) => CombinedVueInstance<Data, Methods, Computed, Props>). This means it just absorbs the argument types of the Constructor type that's given. See microsoft/TypeScript#13743 for more details

Oh, I didn't understand about the mixin constructor correctly. Thank you for the explanation.

ktsn · 2017-06-15T15:36:38Z

types/vue.d.ts

+  extend<VC extends VueConstructor, PropNames extends string = never>(this: VC, definition: FunctionalComponentOptions<PropNames[], Record<PropNames, any>>): ExtendedVue<VC, {}, {}, {}, Record<PropNames, any>>;
+  extend<VC extends VueConstructor, Props extends Record<string, PropValidator>>(this: VC, definition: FunctionalComponentOptions<Props, Record<keyof Props, any>>): ExtendedVue<VC, {}, {}, {}, Record<keyof Props, any>>;
+  extend<VC extends VueConstructor, Data, Methods, Computed, PropNames extends string = never>(this: VC, options: ThisTypedComponentOptionsWithArrayProps<Data, Methods, Computed, PropNames>): ExtendedVue<VC, Data, Methods, Computed, Record<PropNames, any>>;
+  extend<VC extends VueConstructor, Data, Methods, Computed, Props extends Record<string, PropValidator>>(this: VC, options?: ThisTypedComponentOptionsWithRecordProps<Data, Methods, Computed, Props>): ExtendedVue<VC, Data, Methods, Computed, Record<keyof Props, any>>;


In the following code, this type in Child component options does not seem to have parent's properties while the newed Child component has it.

const Parent = Vue.extend({ data () { return { parent: 'Hello' } } }) const Child = Parent.extend({ methods: { foo () { this.parent // Compile error } } }) const child = new Child() child.parent // No error

But I'm not sure how we can solve this. It may need more type parameters to extract the parent instance types into ThisType of the child component options....

Good catch! I think I can fix this, but I'll have to look into it later today.

DanielRosenwasser · 2017-06-15T23:45:13Z

I just sent out a fix. In the previous iteration, extend inherited members on the static side instead of the instance side. I've now done the opposite. Give it another go - I've added the test that @ktsn mentioned above.

DanielRosenwasser · 2017-06-15T23:47:41Z

@yyx990803 I think I could undo the commit if you don't want to fix #5016 right away.

HerringtonDarkholme

Thanks again for the awesome work! It really push Vue's typing to the horizon of TypeScript!

Since this definition is very sophisticated, it is even nicer to capture compiling error in test as well as compiling success. So we can ensure our definition correctly reject wrong code. In TS repo we have baseline test. In other langauges, for example Shapeless, a type level library in Scala, have artifacts like macro to test compilation error.

Do you have any suggestion for library author to test compiling error?

HerringtonDarkholme · 2017-06-16T02:14:24Z

types/options.d.ts

  children: VNode[];
  slots(): any;
  data: VNodeData;
  parent: Vue;
  injections: any
 }

+export type PropValidator = PropOptions | Constructor | Constructor[];


Do we have any chance to infer Prop type from Constructor? Something like the reverse of emitDecoratorMetadata

I originally tried to do that but the more I thought about it, the more time I realized it'd take to finish. I figured it'd be better to put the PR out and try that at a later stage.

HerringtonDarkholme · 2017-06-16T02:33:51Z

types/options.d.ts

+/**
+ * This type should be used when an array of strings is used for a component's `props` value.
+ */
+export type ThisTypedComponentOptionsWithArrayProps<Instance extends Vue, Data, Methods, Computed, PropNames extends string> =


Can we re-export ThisTyped option in index? It is useful for library authors, I think.

Is that a great idea? Does re-exporting mean that this is committed to as part of the public interface?

Also, should I just rename this to ComponentOptionsWithArrayProps?

HerringtonDarkholme · 2017-06-16T03:13:14Z

types/vue.d.ts

  readonly $slots: { [key: string]: VNode[] };
  readonly $scopedSlots: { [key: string]: ScopedSlot };
  readonly $isServer: boolean;
+  readonly $data: Record<string, any>;
+  readonly $props: Record<string, any>;


We can also make Vue generic so $data and $props can be typed. But I wonder if it is an overkill.

I originally made it generic but ran into problems.

Namely, VueConstructor has two construct signatures. Each of those signatures has two different sets of type parameters. They each constructed, at least in part, a Vue<Data, Methods, Computed, Props>`, but each gave different type arguments.

When extending a Vue<Data, Methods, Computed, Props>, TypeScript tries to find the right construct signature, but it can't because it's not really possible to make a meaningful set of type arguments for Vue` that would create the same output type for both signatures.

What it comes down to is that TypeScript has always had an assumption that the type parameters of a construct signature have had a direct correlation with the type parameters of the constructed type - but that's not entirely the case here. At least, that's my understanding of the problem.

So I could try to address this, but maybe down the line. Plus, does anyone need to access $data and $props outside of debugging?

Thanks for the detailed explanation!

Indeed, $data and $props are mainly for advanced usage like delegate / wrapper component (example). We would like to check template code in future. So a $props or $data might be helpful.

For ordinary users, Record should be enough.

HerringtonDarkholme · 2017-06-16T03:14:37Z

types/vue.d.ts


-  static config: {
+  use<T>(plugin: PluginObject<T> | PluginFunction<T>, options?: T): void;
+  mixin(mixin: typeof Vue | ComponentOptions<any, any, any, any>): void;


mixin does not have ThisTyped as component or extend, is this intended?

This is intended - I don't think ThisType would help the common scenarios, and I think don't think we can model the scenario all that well. For example, I don't think "get the type of all the methods from each mixin and intersect them` is possible at the moment.

HerringtonDarkholme · 2017-06-16T03:20:07Z

types/options.d.ts

+ */
+export type ThisTypedComponentOptionsWithArrayProps<Instance extends Vue, Data, Methods, Computed, PropNames extends string> =
+  object &
+  ComponentOptions<Data | ((this: Record<PropNames, any> & Instance) => Data), Methods, Computed, PropNames[]> &


👍 for only exposing prop!

I agree! To be honest this was more a limitation of the type system but it honestly seemed like more of a feature than a bug. 😄

championswimmer · 2017-07-27T14:32:19Z

What's the status with this ?

I pulled it locally, and tried it out in my project, and everything seems to work pretty well. Almost negates the need of vue-class-component

Conflicts: types/vue.d.ts

DanielRosenwasser · 2017-08-01T23:12:40Z

@HerringtonDarkholme the problem with your suggestion is that it still breaks people who've done module augmentations (because you're moving from an interface to a type alias) but I think that would potentially be okay. It's just something to keep in mind.

Would it be okay to pull this in and then revisit that change instead? It might be easier for the core team to gauge the impact of that.

znck · 2017-08-02T04:50:21Z

package.json

@@ -118,7 +118,7 @@
    "selenium-server": "^2.53.1",
    "serialize-javascript": "^1.3.0",
    "shelljs": "^0.7.8",
-    "typescript": "^2.3.4",
+    "typescript": "2.5.0-dev.20170615",


Shouldn't it be depending on a stable version?

It depended on some experimental changes but afaik they landed in 2.4, didn't they @DanielRosenwasser?

HerringtonDarkholme · 2017-08-02T05:29:42Z

@DanielRosenwasser Indeed.

After several trials, I think changing to interface ComponentOptions<V, D=any, M=any, C=any, P=any> might introduce fewer upgrading issues.

blake-newman · 2017-08-15T12:15:03Z

@HerringtonDarkholme @DanielRosenwasser Anything that still needs to be done, can i help out with anything?

HerringtonDarkholme · 2017-08-15T15:41:53Z

@blake-newman I think this pull request needs update dependency and tweak Props option type.

@DanielRosenwasser If you're busy with other things, I'm glad to take this over.

AlexStacker · 2017-08-15T16:35:33Z

Hi, @DanielRosenwasser When I clone your branch vue-router，It seems not work. It took me a day to find out why.Fortunately, I found it.

This is not sure of the return value。

This is the right to return to rewrite.

I just started to learn Vue recently, do not know to rewrite the right.
That branch, I can't open an issue, and that's relevant, so I submitted it here.

DanielRosenwasser · 2017-08-16T17:53:41Z

Just pushed a few new commits, but not sure why the build is failing.

SUMMARY:
✔ 969 tests completed
✖ 1 test failed

FAILED TESTS:
  Transition mode
    ✖ transition out-in on async component (resolve after leave complete)
      PhantomJS 2.1.1 (Linux 0.0.0)
    Expected 1 to be 0.
    webpack:///test/unit/features/transition/transition-mode.spec.js:480:44 <- index.js:149624:44
    shift@webpack:///test/helpers/wait-for-update.js:24:32 <- index.js:90813:36

DanielRosenwasser · 2017-08-16T18:06:46Z

Just amended and re-pushed. Looks like there is a flaky test.

DanielRosenwasser · 2017-08-16T18:07:16Z

@HerringtonDarkholme if you can merge and take over, that would be absolutely fantastic. I'd be glad to help however I can.

yyx990803 · 2017-08-29T14:36:49Z

Closing with the work being continued in #6391

pkf1994 · 2020-08-09T04:54:35Z

comment it.

chenyayong · 2021-06-16T15:40:31Z

yyx990803 and others added 14 commits February 26, 2017 18:23

refactor TypeScript typings to use ES style exports

5b5a88f

Allow functions in 'methods' & 'computed' to view themselves, as well…

385a744

… as members from 'data' and the Vue instance.

Got 'new Vue(...)', 'Vue.extend(...)', and 'Vue.component(...)' working.

8cd5b9c

Made it so that any 'data' function can only access 'props' and base …

540a38f

…Vue instance members.

Improved defaults, fixed overloads and types for functional component…

f34f4f6

…s, got rid of AnyVue.

Condensed declaration of 'watch'.

b1f40ce

Added two tests for 'extend'.

355ff75

.\types\options.d.ts

bc54007

Updated tests, tighted strictness.

e7ea5bb

Merge remote-tracking branch 'upstream/dev' into accurateVueTypes

ebde0b1

Conflicts: types/vue.d.ts

Made the Vue instance non-generic, made readonly, augmented tests.

d78d14b

Make it possible to extend Vue without type arguments.

fc83771

Removed 'ThisTypedComponentOptions'.

a50c838

Merge remote-tracking branch 'upstream/dev' into accurateVueTypes

3c86b10

Conflicts: types/options.d.ts types/test/options-test.ts types/test/vue-test.ts types/vue.d.ts

yyx990803 requested review from ktsn, HerringtonDarkholme and octref June 15, 2017 04:31

HerringtonDarkholme reviewed Jun 15, 2017

View reviewed changes

Upgraded dependency on TypeScript.

33a106c

ktsn reviewed Jun 15, 2017

View reviewed changes

DanielRosenwasser added 2 commits June 15, 2017 16:30

Added test by @ktsn.

0f586db

Removed unnecessary mixin constructors, made 'VueConstructor' generic.

1092efe

HerringtonDarkholme reviewed Jun 16, 2017

View reviewed changes

HerringtonDarkholme approved these changes Jun 16, 2017

View reviewed changes

Merge remote-tracking branch 'upstream/dev' into accurateVueTypes

e4a8545

Conflicts: types/vue.d.ts

znck reviewed Aug 2, 2017

View reviewed changes

octref mentioned this pull request Aug 5, 2017

TypeScript global declarations handled inconsistently with actual build vuejs/vetur#159

Closed

HerringtonDarkholme mentioned this pull request Aug 15, 2017

Typescript experimental declarations feature #6368

Closed

ktsn mentioned this pull request Aug 15, 2017

feat: adapt to the new vue typings vuejs/vue-class-component#132

Merged

This was referenced Aug 15, 2017

feat(typings): adapt to the new Vue typings vuejs/vuex#909

Merged

feat(typings): adapt to the new Vue typings vuejs/vue-router#1685

Merged

Props -> Record<keyof Props, any>

f7ebfa3

Update TypeScript devDependency.

bb0ff30

DanielRosenwasser force-pushed the accurateVueTypes branch from f1edc6d to bb0ff30 Compare August 16, 2017 17:54

HerringtonDarkholme mentioned this pull request Aug 17, 2017

Further improve Vue type declarations for canonical usage #6391

Merged

nickmessing mentioned this pull request Aug 20, 2017

Replace Flow with TypeScript to avoid Facebook’s BSD Patents License #6411

Closed

igogrek mentioned this pull request Aug 21, 2017

TypeScript template? vuejs/vue-cli#263

Closed

yyx990803 force-pushed the dev branch from 3cac5c7 to 82f03de Compare August 21, 2017 10:46

vuejs deleted a comment from AlexStacker Aug 22, 2017

yyx990803 closed this Aug 29, 2017

ryanelian mentioned this pull request Oct 13, 2017

Support allowSyntheticDefaultImports ryanelian/instapack#18

Closed

KaelWD mentioned this pull request Aug 28, 2018

Property 'xxx' does not exist on type CombinedVueInstance ? #8721

Open

Improve Vue type declarations for more canonical usage #5887

Improve Vue type declarations for more canonical usage #5887

Conversation

DanielRosenwasser commented Jun 14, 2017 • edited Loading

yyx990803 commented Jun 15, 2017 • edited Loading

HerringtonDarkholme commented Jun 15, 2017

HerringtonDarkholme Jun 15, 2017 • edited Loading

Choose a reason for hiding this comment

DanielRosenwasser Jun 15, 2017 • edited Loading

Choose a reason for hiding this comment

HerringtonDarkholme Jun 15, 2017 • edited Loading

Choose a reason for hiding this comment

DanielRosenwasser commented Jun 15, 2017

DanielRosenwasser commented Jun 15, 2017

ktsn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DanielRosenwasser Jun 15, 2017 • edited Loading

Choose a reason for hiding this comment

DanielRosenwasser commented Jun 15, 2017

DanielRosenwasser commented Jun 15, 2017 • edited Loading

HerringtonDarkholme left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DanielRosenwasser Jun 16, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

championswimmer commented Jul 27, 2017

DanielRosenwasser commented Aug 1, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HerringtonDarkholme commented Aug 2, 2017

blake-newman commented Aug 15, 2017 • edited Loading

HerringtonDarkholme commented Aug 15, 2017

AlexStacker commented Aug 15, 2017

DanielRosenwasser commented Aug 16, 2017 • edited Loading

DanielRosenwasser commented Aug 16, 2017

DanielRosenwasser commented Aug 16, 2017

yyx990803 commented Aug 29, 2017

pkf1994 commented Aug 9, 2020

chenyayong commented Jun 16, 2021

DanielRosenwasser commented Jun 14, 2017 •

edited

Loading

yyx990803 commented Jun 15, 2017 •

edited

Loading

HerringtonDarkholme Jun 15, 2017 •

edited

Loading

DanielRosenwasser Jun 15, 2017 •

edited

Loading

HerringtonDarkholme Jun 15, 2017 •

edited

Loading

DanielRosenwasser Jun 15, 2017 •

edited

Loading

DanielRosenwasser commented Jun 15, 2017 •

edited

Loading

HerringtonDarkholme left a comment •

edited

Loading

DanielRosenwasser Jun 16, 2017 •

edited

Loading

DanielRosenwasser commented Aug 1, 2017 •

edited

Loading

blake-newman commented Aug 15, 2017 •

edited

Loading

DanielRosenwasser commented Aug 16, 2017 •

edited

Loading