How to load a javascript library that is not in Typescript

Question

Here is the official document covering the module loading in Typescript. A section titled "Ambient Modules" is talking about loading module that is not written in Typescript. I am trying to do simple learning project to use the method explained in the official document to load a module.

I am trying to use Typescript to load this following MyThing.js library.

// myThings.js
function getMyThing (){
    return "This is my thing";
}

function getMyObject() {
    return {
        a: 1,
        b: "my object"
    }
}

Here is my myThing.d.ts file:

// myThing.d.ts
declare module myThing {
    interface MyObject {
        a: number;
        b: string;
    }

    export function getMyThing():string;
    export function getMyObject():MyObject;

}

Here is the app.ts that use the myThing library.

// app.ts
import {getMyThing} from "./myThing.d";

myThing.js, myThing.d.ts, and app.ts are in the same folder. Oh boy, nothing is right. When I compile app.ts, got the following error:

myThing.d.ts' is not a module. (2306)

My question is how do I import a module that is not written in Typescript? Do I have to use declare file? Please provide sample code using the demo files above.

I've already read the official document, but still couldn't get it right.

gnalck · Accepted Answer · 2016-09-25 18:31:54Z

Exporting the type definition module

When Typescript tries to import your module, it looks in the relevant file (in this case, myThing.d.ts, and sees if a module with that name (getMyThing) is exported. In this case, you merely declared a module, but did not export it, so you want to change your .d.ts file to the following:

// myThing.d.ts
export module myThing {
//^ we changed from 'declare' to 'export'
    interface MyObject {
        a: number;
        b: string;
    }
    export function getMyThing():string;
    export function getMyObject():
}

Importing the module correctly

Now, when you compile, you will get the following error:

app.ts(1,9): error TS2305: Module '"/home/gnalck/workspace/modules/myThing"' has no exported member 'getMyThing'.

This is because you exported one logical module myThing, and nothing more. As such, change your import statement to the following:

import {myThing} from './myThing';

If you want to still use getMyThing, you would reference it as myThing.getMyThing().

Updating the JS file to be modular

With these changes, if you run it in e.g., node, you will still get a runtime error, like the following: TypeError: Cannot read property 'getMyThing' of undefined. This is because your JS file is not modular.

You need to format your JS file to have a similar export topography as your .d.ts file. Here is one solution, using CommonJS style:

module.exports = {
  myThing: {
    getMyThing: function () {
      return "This is my thing";
    },

    getMyObject: function () {
      return {
        a: 1,
        b: "my object"
      }
    }
  }
}

Collectives™ on Stack Overflow

How to load a javascript library that is not in Typescript

1 Answer 1

Exporting the type definition module

Importing the module correctly

Updating the JS file to be modular

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Exporting the type definition module

Importing the module correctly

Updating the JS file to be modular

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related