Using typescript module without require()

Question

I write a typescript 2.3 app.ts which needs Vuejs library v2. Vuejs script src is added manually in html file. I just want use Vuejs with type checking ! I expected i just have to reference like this :

/// < reference path="vue.d.ts" />

But the Vue class is not accessible from app.ts.

I tried to import the module directly :

import * as Vue from "./vue";

This time i have to use new Vue.Vue({}) to access to the class but VS 2017 build. The app.js generated starts with var Vue = require("./vue");. However in the browser, i got some errors :

exports reference (solved by adding export = 0; at line 1 in .ts
require is not a function

For require(), i add < script src="Scripts/require.js">< /script> but new error: has not been loaded yet for context.

I tried with systemjs instead of require.js, i add < script>System.import('scripts/app.js');< /script> i get a 404 accessing to "Scripts/vue" (the require from the app.js), the rest of app.js is not executed.

Note : i don't use tsconfig.json

I'm surprised cause in my memory, the reference of jQuery worked with typescript 0.9

I'm completely lost. Help me ! Thank you community !

Louis Louis · Accepted Answer · 2017-06-06T11:00:58

I typically work around the issue you ran into by creating globals.d.ts file which is responsible to setting up the global environment that my code expects. In your case something like:

import * as _Vue from "vue";

declare global {
    const Vue: typeof _Vue;
}

This makes it so that the compiler will see a Vue symbol in the global space which is of the same type as what the "vue" module exports.

With the above file, this compiles:

const q = new Vue();

Note that you either will have to use a tsconfig.json. Even an empty one works. (By "empty", I mean a file that contains only an empty JSON structure: {}.) Or you will have to list all files to compile, including globals.d.ts at the command line.

Using typescript module without require()

1 Answers