Add Vue + TypeScript guide #649

ktsn · 2016-12-12T05:48:54Z

I've wrote a beginner's guide of using Vue.js with TypeScript. It introduces official declaration files and vue-class-component briefly. I think readers can make simple applications after understanding this guide.

I added this guide after SSR guide but not sure it is appropriate place.

@kaorun343 @HerringtonDarkholme Your review would be appreciated if you have time :)

HerringtonDarkholme

Other than some grammar issues, this guide looks great!

HerringtonDarkholme · 2016-12-12T05:52:24Z

src/v2/guide/typescript.md

+
+## Official Declaration Files
+
+There are official declaration files for Vue, vue-router and vuex. You do not have to use external tools like `typings` to use them since they are published via npm. You can install Vue's declarations with `npm install vue`. Then, all declarations can be imported with `import` statement.


Maybe consistent case is better?

It seems that Vue is title case but vue-router and vuex is following github repository name in the docs.
Is that correct? /ping @chrisvfritz

HerringtonDarkholme · 2016-12-12T05:53:07Z

src/v2/guide/typescript.md

+Example of component definition with TypeScript:
+
+``` ts
+// we cannot write `import Vue from 'vue'` in TypeScript


👍 Thanks for pointing this out! Importing is a pain point I have seen a lot in TS community.

We can use import * as Vue from "vue"; this syntax instead (at least, working well to me).
I don't sure but I'm using webpack + ts-loader + vue-loader and these might affect my module structure.

@ryutamaki
Actually, import * as Vue from "vue"; and import Vue = require("vue"); are the same thing. I choose the later syntax because it would be more intentional to import single object.

But maybe writing the former syntax as a note would also be good. I'll add about that, thanks for pointing this out!

I feel ambivalent toward import * as Vue from "vue" syntax. On one hand, it is a standard syntax for importing. On the other hand, TypeScript's runtime behavior to consume commonjs module is different from other transpilers like Babel: Babel user will write import Vue from "vue", but TSC user will write import * as Vue.

TypeScript's behavior is also incompatible with node-eps. I think choosing the nonstandard syntax is a good sign to user that module system is still not stable.

@DanielRosenwasser, I would be honored if you can give suggestion on this.

Personally, I'd say that import Vue = require("vue"); is the most appropriate way to import a CommonJS module given that the interop behavior hasn't been settled on yet.

HerringtonDarkholme · 2016-12-12T05:55:04Z

src/v2/guide/typescript.md

+})
+```
+
+Note that `Vue` is already typed, so all methods, properties and parameters will be type checked. For example, if you typo `template` option, TypeScript compiler will print an error message on a compile time.


It seems typo is a noun. https://www.merriam-webster.com/dictionary/typo
Would you please change it to if you have a typo in template option ?

HerringtonDarkholme · 2016-12-12T06:00:49Z

src/v2/guide/typescript.md

+
+You can see all available types on the corresponding repository ([here are Vue's types](https://github.com/vuejs/vue/blob/dev/types/index.d.ts)).
+
+<p class="tip">The declaration files of Vue requires `--lib DOM,ES2015` as compiler option. So you need to pass the option via `tsc` command or `tsconfig.json`. For more details of compiler options, please see [Compiler Options · TypeScript](https://www.typescriptlang.org/docs/handbook/compiler-options.html)</p>


I would suggest to require only --lib DOM,ES2015.promise. Because Promise is the only requirements in Vue(and it is optional, if users do not use async component.). IMHO, listing only API we used is in accordance with the rule of least power.

Yes, it is definitely better 🙂

HerringtonDarkholme · 2016-12-12T06:04:05Z

src/v2/guide/typescript.md

+order: 25
+---
+
+If you develop a large application, using a language having static type checking would be helpful. If your code seems to cause unexpected behavior, it provides useful errors before you run it on browsers. You can easily use [TypeScript](https://www.typescriptlang.org/) (one of popular AltJS having static type checking) with Vue since Vue officially provides its declaration files.


If your code seems to cause unexpected behavior

This sentence does not make much sense to me.... Maybe If you have unexpected typos in your code is better?

Yeah, it would be clearer and understandable. So how about For example, if you have typos in your code, ... ? Because typos are always unexpected thing 😛

If you have unexpected mistakes in your code?

kaorun343 · 2016-12-12T07:54:08Z

src/v2/guide/typescript.md

+  // all component options are allowed in here
+  template: '<button @click="onClick">Click!</button>'
+})
+export default MyComponent extends Vue {


class is missing

export default class MyComponent extends Vue

Thanks, I often miss it 😅

kaorun343 · 2016-12-12T08:03:24Z

It looks so great to me! 😄

chrisvfritz · 2016-12-14T06:55:50Z

@ktsn @kaorun343 @HerringtonDarkholme I just revised this and would like your feedback to make sure I didn't ruin it. 😄 Fantastic info here! Beyond tweaking some language and reorganizing a bit, I removed some explanations about TypeScript that weren't specific to Vue (e.g. different ways of importing JS modules), as I think we might want to assume some TypeScript experience here. I'm not an expert though, so let me know if you think that was a mistake.

HerringtonDarkholme · 2016-12-14T07:11:16Z

src/v2/guide/typescript.md

+
+## Official Declaration Files
+
+A strong type system can help prevent many potential runtime errors, especially as applications grow. That's why Vue ships with [official type declarations](https://github.com/vuejs/vue/tree/dev/types) for [TypeScript](https://www.typescriptlang.org/) - not only in Vue core, but also [for Vue Router](https://github.com/vuejs/vue-router/tree/dev/types) and [for Vuex](https://github.com/vuejs/vuex/tree/dev/types) as well.


Would you mind replacing strong with static? TypeScript isn't type sound in language design. static is probably a better choice to express compile time checking.

HerringtonDarkholme

Great works! 😄

ktsn · 2016-12-14T07:24:52Z

@chrisvfritz Looks great! Thanks for your revising 😄

sanxing-chen · 2017-01-14T01:57:23Z

Could you please to tell me which color theme do you use in the VScode? Thank you.

chrisvfritz · 2017-01-14T05:22:58Z

@STayinloves It's all a lie, unfortunately. @phanan photoshopped a screenshot I took to better match Vue's colors. 🙂

phanan · 2017-01-14T06:42:49Z

😛 I'm sorry…

sanxing-chen · 2017-01-14T06:52:09Z

Oh, anyway, still thank both of you. Maybe can hack one some day. @chrisvfritz @phanan

sanxing-chen · 2017-02-16T13:44:00Z

I write a color theme like this for VSCode today. Published at here. Someone may have interest.😛

* add vue + typescript guide * add introduction of typescript guide * add a caveat of official declaration files * improve typescript guide by reviews * fix the description of typescript again * revise and reorganize typescript doc * Update strong to static in typescript guide

ktsn added 3 commits December 11, 2016 23:07

add vue + typescript guide

7784c1d

add introduction of typescript guide

8903224

add a caveat of official declaration files

e528d7e

HerringtonDarkholme approved these changes Dec 12, 2016

View reviewed changes

kaorun343 reviewed Dec 12, 2016

View reviewed changes

ktsn and others added 3 commits December 12, 2016 20:43

improve typescript guide by reviews

cca9950

fix the description of typescript again

e65e511

revise and reorganize typescript doc

70bd2eb

chrisvfritz approved these changes Dec 14, 2016

View reviewed changes

HerringtonDarkholme reviewed Dec 14, 2016

View reviewed changes

Update strong to static in typescript guide

a6dbc08

HerringtonDarkholme approved these changes Dec 14, 2016

View reviewed changes

chrisvfritz merged commit dbdf1ca into vuejs:master Dec 14, 2016

ktsn deleted the typescript branch December 14, 2016 07:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Vue + TypeScript guide #649

Add Vue + TypeScript guide #649

ktsn commented Dec 12, 2016

HerringtonDarkholme left a comment

HerringtonDarkholme Dec 12, 2016

ktsn Dec 12, 2016

HerringtonDarkholme Dec 12, 2016

ryutamaki Dec 12, 2016 •

edited

Loading

ktsn Dec 12, 2016

HerringtonDarkholme Dec 12, 2016 •

edited

Loading

DanielRosenwasser Dec 12, 2016

HerringtonDarkholme Dec 12, 2016

HerringtonDarkholme Dec 12, 2016

ktsn Dec 12, 2016

HerringtonDarkholme Dec 12, 2016

ktsn Dec 12, 2016

HerringtonDarkholme Dec 12, 2016

kaorun343 Dec 12, 2016

ktsn Dec 12, 2016

kaorun343 commented Dec 12, 2016

chrisvfritz commented Dec 14, 2016 •

edited

Loading

HerringtonDarkholme Dec 14, 2016 •

edited

Loading

chrisvfritz Dec 14, 2016

HerringtonDarkholme left a comment

ktsn commented Dec 14, 2016

sanxing-chen commented Jan 14, 2017

chrisvfritz commented Jan 14, 2017

phanan commented Jan 14, 2017

sanxing-chen commented Jan 14, 2017

sanxing-chen commented Feb 16, 2017


		## Official Declaration Files

		There are official declaration files for Vue, vue-router and vuex. You do not have to use external tools like `typings` to use them since they are published via npm. You can install Vue's declarations with `npm install vue`. Then, all declarations can be imported with `import` statement.


		You can see all available types on the corresponding repository ([here are Vue's types](https://github.com/vuejs/vue/blob/dev/types/index.d.ts)).

		<p class="tip">The declaration files of Vue requires `--lib DOM,ES2015` as compiler option. So you need to pass the option via `tsc` command or `tsconfig.json`. For more details of compiler options, please see [Compiler Options · TypeScript](https://www.typescriptlang.org/docs/handbook/compiler-options.html)</p>


		## Official Declaration Files

		A strong type system can help prevent many potential runtime errors, especially as applications grow. That's why Vue ships with [official type declarations](https://github.com/vuejs/vue/tree/dev/types) for [TypeScript](https://www.typescriptlang.org/) - not only in Vue core, but also [for Vue Router](https://github.com/vuejs/vue-router/tree/dev/types) and [for Vuex](https://github.com/vuejs/vuex/tree/dev/types) as well.

Add Vue + TypeScript guide #649

Add Vue + TypeScript guide #649

Conversation

ktsn commented Dec 12, 2016

HerringtonDarkholme 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

ryutamaki Dec 12, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HerringtonDarkholme Dec 12, 2016 • 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

kaorun343 commented Dec 12, 2016

chrisvfritz commented Dec 14, 2016 • edited Loading

HerringtonDarkholme Dec 14, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HerringtonDarkholme left a comment

Choose a reason for hiding this comment

ktsn commented Dec 14, 2016

sanxing-chen commented Jan 14, 2017

chrisvfritz commented Jan 14, 2017

phanan commented Jan 14, 2017

sanxing-chen commented Jan 14, 2017

sanxing-chen commented Feb 16, 2017

ryutamaki Dec 12, 2016 •

edited

Loading

HerringtonDarkholme Dec 12, 2016 •

edited

Loading

chrisvfritz commented Dec 14, 2016 •

edited

Loading

HerringtonDarkholme Dec 14, 2016 •

edited

Loading