Add typescript definition #3509

kaorun343 · 2016-08-24T02:16:13Z

Hi.

This is a definition file for Vue.js 2.0.
I would like to unite the way of providing these definition files, I think, so I took the same way of Vuex.

I referenced a rc.vuejs.org, and it is not complete. These are the TODO List of this.
I hope that this PR will be merged and modified the files to achieve these things by other people.

Adding rest definitions since v1.0 such as lifecycle hooks.
Adding the functions related to createElement and writing the interface VNode and others.
Considering the naming of the interfaces, for instance, whether we should use the same name between TS and Flow.
Adding JSDoc/TSDoc comments for IDE. If allowed, I'd like to refer to the official documents.
Adding a test if needed as well as we did in DefinitelyTyped
Modifying vue-class-component to use this new definition file when this is finished

Thanks.

ktsn · 2016-08-24T02:28:31Z

types/index.d.ts

+interface Array<T> {
+  $remove(item: T): Array<T>;
+  $set(index: any, val: T): T;
+}


Actually, these methods are deprecated on 2.0. We can just remove them.

ktsn · 2016-08-24T02:35:12Z

types/index.d.ts

+  static compile(template: string): {render: Function, staticRenderFns: Function};
+}
+
+declare namespace Vue {


I think we no longer need namespaces for declarations because we can use external module definition format.
Instead of this, I think it would be better to separate files and import the types as needed.

ktsn · 2016-08-24T03:04:17Z

@kaorun343
Thank you for starting write declarations!
I write some comments for this. Please check them 😄

* separate files * remove unnecessary `{[key: string]: any}` * from singular to plural

* Add more definitions * Rename filename and interface * Sort definitions * Fix indent

* add test * fix some definitions * fix typo

ericmdantas · 2016-08-24T19:23:26Z

This is awesome, @kaorun343. I was just thinking the other day how much better Vue'd be with the help of Typescript.

Keep it up! 👍

kaorun343 · 2016-08-25T02:45:17Z

I've done my work.

ktsn · 2016-08-25T12:48:56Z

types/options.d.ts

+
+export interface ComputedOptions {
+  get(this: Vue): any;
+  set(this: Vue, value: any): void;


ComputedOptions may have cache: boolean property. And all options are optional.

ktsn · 2016-08-25T13:00:17Z

@kaorun343
Thanks! I have written the comments for some critical parts.
LGTM if you fix them 👍

kaorun343 · 2016-08-25T13:24:03Z

I've done 👍

ktsn · 2016-08-25T13:50:05Z

Great job 😄

HerringtonDarkholme · 2016-08-29T01:06:04Z

types/options.d.ts

+  render?(createElement: typeof Vue.prototype.$createElement): VNode;
+  staticRenderFns?: (() => VNode)[];
+
+  init?(): void;


It seems init is changed to beforeCreated. #2873

HerringtonDarkholme · 2016-08-29T01:26:48Z

Great Job! This type definition has very high quality. Kudos to @kaorun343

yyx990803 · 2016-08-31T15:01:37Z

Is this ready?

kaorun343 · 2016-08-31T15:17:43Z

Yes!

yyx990803 · 2016-08-31T15:36:54Z

Great, can we also add:

a npm script that runs the typescript tests
include that script in npm test

yyx990803 · 2016-08-31T16:39:25Z

Manually squashed and merged as dfc64e8 - Thanks for the hard work!

HerringtonDarkholme · 2016-09-01T05:47:13Z

I have used it locally. There are some issues that block the adoption I think...

no typings field in package.json. Users have to install type definition one more time. This can be easily fixed.
export = Vue in index.d.ts actually does not work for TypeScirpt's module resolution. This is the hard part.

For point1 adding a new field is enough. But point2 needs more elaboration.
Vue exposes Vue as a whole for API consumer. It is good for non-ES6 module users but in ES6 the correct way to import is import * as Vue from "vue". (Babel support this by _interopRequireDefault helper function)

TS cannot export a class as a whole. The workaround hack is export = Vue as submitted in this PR, but the exported symbol must be a namespace or merged with namespace declaration. This is by design, I don't think there is much chance to be changed in TS/ES.

HerringtonDarkholme · 2016-09-01T05:58:36Z

One workaround is changin index.d.ts to this

import {Vue as _V} from './vue'
declare class Vue extends _V {}
declare namespace Vue {}
export = Vue

declare namespace statement is for bypassing export limitation.

declare class Vue extends _V is solely for bypassing import limitation in TS module declaration.

This is hideous hack, and TS users must import * as Vue from "vue", lame. But limits changes in TS specific files.

Another way is adding two private fields to Vue: default pointing to Vue itself and __esModule being true.
This change is compatible with ES5/commonJS/ES6/Babel/TypeScript, and probably future proof. Everyone shall be happy. And TS users can just import Vue from "vue", cool.
But the change needs to be applied to Vue itself.

What's your opinions? @yyx990803 @kaorun343 @ktsn

ktsn · 2016-09-01T06:45:02Z

I think changing index.d.ts is better solution because it can clearly separate the code for adapting Vue's implementation in that file.
If we can insert module.exports.default = Vue and module.exports.__esModule = true on build time, I think it's also good.

HerringtonDarkholme · 2016-09-01T08:42:25Z

@ktsn You mean change something in Babel preset to support module.exports.default = Vue? https://github.com/yyx990803/babel-preset-es2015-rollup-vue

~~after lengthy web search I think TS users should forget import default and just pay taxes for type checking~~

ktsn · 2016-09-01T12:05:56Z

@HerringtonDarkholme
Yes, or rollup plugin. But I'm not sure whether such plugin is exist or not.
Probably updating d.ts is realistic. 😉

HerringtonDarkholme · 2016-09-02T01:46:40Z

types/vue.d.ts

+    keyCodes: { [key: string]: number };
+  }
+
+  static extend(options: ComponentOptions): Vue;


It seems extend should return typeof Vue. https://rc.vuejs.org/api/#Vue-extend

druppy · 2016-09-29T20:52:37Z

This is so nice to have d.ts files in the npm packages (for all central components), I really like the way things a going for Vue, I still miss my constructor for classes, to make TS nicer to dance with :-)

But my real issue are, how will a render function look like ? I like to use the new VNode system, from Typescript, but I cant seem to find the prototype anymore (found it in rc7).

Also, has anyone tried to use TSX in any of the modes ?

HerringtonDarkholme · 2016-09-30T02:23:17Z

@druppy Thanks for supporting vue. But github issues are mainly for bug report/ feature request. And please file relevant reviews under a pull request.

You can ask question in gitter and forum. And you may also find https://github.com/vuejs/awesome-vue helpful.

kaorun343 added 2 commits August 24, 2016 04:01

Add index.d.ts

794ee6b

Remove unnecessary comment

81ccc22

ktsn reviewed Aug 24, 2016
View reviewed changes

Remove unnecessary definition

58cc89a

ktsn reviewed Aug 24, 2016
View reviewed changes

kaorun343 added 4 commits August 24, 2016 12:33

Update definitions

9566257

* separate files * remove unnecessary `{[key: string]: any}` * from singular to plural

Update definitions

0a1f118

* Add more definitions * Rename filename and interface * Sort definitions * Fix indent

Fix

3a3b065

Add test

8df7277

* add test * fix some definitions * fix typo

ktsn reviewed Aug 25, 2016
View reviewed changes

Fix ComputedOptions

ffb0cdf

Update Vue.set

fab7f11

yyx990803 added the in progress label Aug 26, 2016

HerringtonDarkholme reviewed Aug 29, 2016
View reviewed changes

Update definitions

1450ac7

Add npm script

da261d5

yyx990803 added in review and removed in progress labels Aug 31, 2016

yyx990803 closed this Aug 31, 2016

kaorun343 deleted the add-typescript-definition branch September 1, 2016 06:52

HerringtonDarkholme mentioned this pull request Sep 1, 2016

adapt index.d.ts for end users #3582

Merged

HerringtonDarkholme reviewed Sep 2, 2016
View reviewed changes

kaorun343 mentioned this pull request Sep 2, 2016

Fix definitons #3591

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add typescript definition #3509

Add typescript definition #3509

kaorun343 commented Aug 24, 2016 •

edited

ktsn Aug 24, 2016

ktsn Aug 24, 2016

ktsn commented Aug 24, 2016

ericmdantas commented Aug 24, 2016

kaorun343 commented Aug 25, 2016

ktsn Aug 25, 2016

ktsn commented Aug 25, 2016

kaorun343 commented Aug 25, 2016

ktsn commented Aug 25, 2016

HerringtonDarkholme Aug 29, 2016

HerringtonDarkholme commented Aug 29, 2016

yyx990803 commented Aug 31, 2016

kaorun343 commented Aug 31, 2016

yyx990803 commented Aug 31, 2016

yyx990803 commented Aug 31, 2016

HerringtonDarkholme commented Sep 1, 2016

HerringtonDarkholme commented Sep 1, 2016 •

edited

ktsn commented Sep 1, 2016

HerringtonDarkholme commented Sep 1, 2016 •

edited

ktsn commented Sep 1, 2016

HerringtonDarkholme Sep 2, 2016

druppy commented Sep 29, 2016

HerringtonDarkholme commented Sep 30, 2016

Add typescript definition #3509

Add typescript definition #3509

Conversation

kaorun343 commented Aug 24, 2016 • edited

ktsn Aug 24, 2016

Choose a reason for hiding this comment

ktsn Aug 24, 2016

Choose a reason for hiding this comment

ktsn commented Aug 24, 2016

ericmdantas commented Aug 24, 2016

kaorun343 commented Aug 25, 2016

ktsn Aug 25, 2016

Choose a reason for hiding this comment

ktsn commented Aug 25, 2016

kaorun343 commented Aug 25, 2016

ktsn commented Aug 25, 2016

HerringtonDarkholme Aug 29, 2016

Choose a reason for hiding this comment

HerringtonDarkholme commented Aug 29, 2016

yyx990803 commented Aug 31, 2016

kaorun343 commented Aug 31, 2016

yyx990803 commented Aug 31, 2016

yyx990803 commented Aug 31, 2016

HerringtonDarkholme commented Sep 1, 2016

HerringtonDarkholme commented Sep 1, 2016 • edited

ktsn commented Sep 1, 2016

HerringtonDarkholme commented Sep 1, 2016 • edited

ktsn commented Sep 1, 2016

HerringtonDarkholme Sep 2, 2016

Choose a reason for hiding this comment

druppy commented Sep 29, 2016

HerringtonDarkholme commented Sep 30, 2016

kaorun343 commented Aug 24, 2016 •

edited

HerringtonDarkholme commented Sep 1, 2016 •

edited

HerringtonDarkholme commented Sep 1, 2016 •

edited