Update typescript.md to describe how to use typescript types without module bundler (closes #2042) #2137

realmerx · 2019-04-22T14:21:39Z

No description provided.

phanan

I'll need another team member to review this, as I myself don't use TS.

src/v2/guide/typescript.md

…out module bundler grammar fixes by phanan Co-Authored-By: realmerx <realmerx@gmail.com>

phanan · 2019-04-22T14:41:44Z

src/v2/guide/typescript.md

@@ -70,7 +70,8 @@ const Component = {
 }
 ```

-To use vue types in environment without module bundler you can create custom type definition file containing declare global (see https://www.typescriptlang.org/docs/handbook/declaration-merging.html)
+To use Vue types in an environment without a module bundler, you can create a custom type definition file containing `declared global` (see [Declaration Merging


The markup is broken here.

Not sure I understood exactly what is broken in markup? Found a typo and added link to url label as well (if it conflicts with style then we can of course keep just the name in url label).

Preview your markdown and you'll see what I mean.

Interesting. I am probably missing something obvious because I did preview and looks correct to me. Here is what I am testing:

https://github.com/vuejs/vuejs.org/blob/6e6891eeb139c6dc712169359677e1bf72dd3c4b/src/v2/guide/typescript.md

And here is what I am seeing:

ktsn · 2019-04-23T07:39:01Z

src/v2/guide/typescript.md

@@ -70,6 +70,18 @@ const Component = {
 }
 ```

+To use Vue types in an environment without a module bundler, you can create a custom type definition file containing `declare global` (see [Declaration Merging https://www.typescriptlang.org/docs/handbook/declaration-merging.html](https://www.typescriptlang.org/docs/handbook/declaration-merging.html)).


It would make more sense to explicitly describe what the definition file does.

To use Vue types

I feel we cannot use Vue's types (like ComponentOptions etc.) without this definition which is not correct from this phrase.

What about the below change?

Suggested change

To use Vue types in an environment without a module bundler, you can create a custom type definition file containing `declare global` (see [Declaration Merging https://www.typescriptlang.org/docs/handbook/declaration-merging.html](https://www.typescriptlang.org/docs/handbook/declaration-merging.html)).

To use Vue in an environment without a module bundler, you can create a custom type definition file containing `declare global` to declare global `Vue` object type (see [Declaration Merging https://www.typescriptlang.org/docs/handbook/declaration-merging.html](https://www.typescriptlang.org/docs/handbook/declaration-merging.html)).

Thank you all for reviewing. Yes, wording needs some work to make it clear what is the purpose of this. You can use Vue fine in typescript without importing types or creating custom type definition file with declare global if you can live with errors (javascript still gets generated correctly) and without intellisense and type recognition in IDE.

Better wording very welcome but here is my try.

Suggested change

To use Vue types in an environment without a module bundler, you can create a custom type definition file containing `declare global` (see [Declaration Merging https://www.typescriptlang.org/docs/handbook/declaration-merging.html](https://www.typescriptlang.org/docs/handbook/declaration-merging.html)).

Vue typescript types normally need to be imported (to get error free typescript compiling and intellisense in IDE). This would require environment with module bundler. To get them working without module bundler one can create custom type definition file containing `declare global` to declare global `Vue` object type (see [Declaration Merging https://www.typescriptlang.org/docs/handbook/declaration-merging.html](https://www.typescriptlang.org/docs/handbook/declaration-merging.html)).

Wait, is this code really work on your environment? I just try it in my local but there is a compile error on it. I'm using the latest Vue (v2.6.10).

Subsequent variable declarations must have the same type. Variable 'Vue' must be of type 'typeof import("(...)/node_modules/vue/types/index")', but here has type 'VueConstructor<Vue>'.ts(2403)

OK, I realized there is already this kind of type declaration in Vue's typings. https://github.com/vuejs/vue/blob/dev/types/index.d.ts#L5

But this declaration is actually not correct as Vue object type is declared under Vue.default. This causes the compilation error which I showed above.

I already created the PR to fix this bug. Once this is merged, you can use global Vue without any additional set up which means we would no longer require this section in docs.
vuejs/vue#9912

Yes I think something has changed in latest typescript version that makes this kind of declaration break - I need to investigate more. But if we can make it work in global context without tricks then even better.

phanan · 2019-04-24T06:52:59Z

Closing in favor of vuejs/vue#9912. Thanks guys!

davidfstr · 2019-07-09T05:39:17Z

As far as I can tell the PR that replaced this one ( vuejs/vue#9912 ) did not actually update any documentation that explains how to use Vue in a global context, which is what this PR was originally intended to do. Therefore I'd advocate reopening this PR.

I'm actively having trouble trying to typecheck a JS file with TypeScript that uses Vue through the window.Vue global, as covered in my forum post here, so having updated documentation would be quite useful!

Update typescript.md

5ed3702

realmerx mentioned this pull request Apr 22, 2019

Improve typescript documentation to show how to use vue without imports that would require module bundler #2042

Closed

phanan requested changes Apr 22, 2019

View reviewed changes

src/v2/guide/typescript.md Outdated Show resolved Hide resolved

phanan changed the title ~~Update typescript.md to describe how to use typescript types without module bundler~~ Update typescript.md to describe how to use typescript types without module bundler (closes #2042) Apr 22, 2019

Update src/v2/guide/typescript.md with info how to use Vue types with…

b019a7c

…out module bundler grammar fixes by phanan Co-Authored-By: realmerx <realmerx@gmail.com>

phanan requested changes Apr 22, 2019

View reviewed changes

Update typescript.md

6e6891e

ktsn reviewed Apr 23, 2019

View reviewed changes

phanan closed this Apr 24, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update typescript.md to describe how to use typescript types without module bundler (closes #2042) #2137

Update typescript.md to describe how to use typescript types without module bundler (closes #2042) #2137

realmerx commented Apr 22, 2019

phanan left a comment

phanan Apr 22, 2019

realmerx Apr 22, 2019 •

edited

phanan Apr 22, 2019

realmerx Apr 22, 2019

ktsn Apr 23, 2019

realmerx Apr 23, 2019

realmerx Apr 23, 2019 •

edited

ktsn Apr 23, 2019

ktsn Apr 23, 2019

realmerx Apr 24, 2019

phanan commented Apr 24, 2019

davidfstr commented Jul 9, 2019

	To use Vue types in an environment without a module bundler, you can create a custom type definition file containing `declare global` (see [Declaration Merging https://www.typescriptlang.org/docs/handbook/declaration-merging.html](https://www.typescriptlang.org/docs/handbook/declaration-merging.html)).
	To use Vue in an environment without a module bundler, you can create a custom type definition file containing `declare global` to declare global `Vue` object type (see [Declaration Merging https://www.typescriptlang.org/docs/handbook/declaration-merging.html](https://www.typescriptlang.org/docs/handbook/declaration-merging.html)).

Update typescript.md to describe how to use typescript types without module bundler (closes #2042) #2137

Update typescript.md to describe how to use typescript types without module bundler (closes #2042) #2137

Conversation

realmerx commented Apr 22, 2019

phanan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

realmerx Apr 22, 2019 • edited

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

realmerx Apr 23, 2019 • edited

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

phanan commented Apr 24, 2019

davidfstr commented Jul 9, 2019

realmerx Apr 22, 2019 •

edited

realmerx Apr 23, 2019 •

edited