Typescript: JS intellisense does not work when d.ts contains import or export

[Thaina]

I was testing with vue on npm. It contain d.ts files in types folder so I reference it in my project like this

And this is what declared in that file

intellisense for Vue does not shown up

until I was remove all import and export keyword

Then it just shown

[andy-ms]

When the file uses the export keyword, that is to indicate that vue is a module. You would need to import it to use it.
When you delete the export keyword, the file is now interpreted as declaring global variables.

[Thaina]

@andy-ms when I delete export but still have import it also does not work

[andy-ms]

If a file has import it's also interpreted as a module -- so if you delete all the exports, it's a module with no exports, which is useless.

[Thaina]

@andy-ms Understood. Thank you very much

But then when I use require to import just for intellisense. I got error

Uncaught ReferenceError: require is not defined

How can I import module for intellisense while the actual thing don't need to import in js?

[andy-ms]

Try import vue = require("vue"); instead.

[Thaina]

@andy-ms It got error

Uncaught SyntaxError: Unexpected token import

Well I might not make it clear but I try to make intellisense from .d.ts work in .js file, not .ts

[andy-ms]

Ah, that won't work then as it's not valid JS syntax. The solution will depend on your module loader -- first I would try using import * as Vue from "vue";, or import Vue from "vue";, and see if it works at runtime (ignoring any TypeScript errors). If you can't use ES6 imports, you could try to install @types/node, which lets you use node functions such as require.

[Thaina]

@andy-ms Sadly just having import in js file cannot make it work at runtime

Uncaught SyntaxError: Unexpected token import

I forgot to mention that my runtime is browser (chrome)

It could let me get correct intellisense in vscode though

[andy-ms]

Could you show a JS example that works for you at runtime? I don't want to confuse the issues of what TypeScript is capable of vs. what your environment is capable of. If Vue is really available as a global variable for you, you could try adding export as namespace Vue; to the bottom of node_modules/vue/types/index.d.ts.

[Thaina]

Adding export as namespace Vue; at the end of vue's index.d.ts make it work now. Thank you very much

But would you please enlighten me what happen here? Why we can't reference to module file in js. And why add that line after export = vue make it work?

[andy-ms]

Why we can't reference to module file in js.

The way to reference something in a module is to use an import. If you are using <script> tags with no module loader, you have no way of importing things, so you must instead use a global variable -- this is what export as namespace declares.
You might consider making an issue with vue asking to add the export as namespace declaration if the library officially supports being used through a global variable.

[Thaina]

Thank you very much