NodeJS How to import JS file into TypeScript

Question

I'm new with TypeScript. I'm currently learning NodeJS Loopback 4 framework which use Typescript language. And my question is how to import some function, class which has been exported in JS file into my TS file. After search several way but it still doesn't work with me. Here's example:

  // /src/index.ts
    import {plus} from './lib/test';

    console.log(plus(1,2));

// /src/lib/test.js
    export function plus(x, y) {
      return x + y;
    }

I also try using definition typescript like this

// /src/lib/test.d.ts
export declare function plus(x: number, y: number): number;

But still got error when import this function in index.ts file

Error: Cannot find module './lib/test' at Function.Module._resolveFilename (module.js:543:15)

Possible duplicate of [How to import js-modules into TypeScript file?](https://stackoverflow.com/questions/41219542/how-to-import-js-modules-into-typescript-file) — maazadeeb, Jan 23 '19 at 06:13
@MaazSyedAdeeb Sorry, I've followed that post and many post about this but it still got error when I try to import it — Quoc Van Tang, Jan 23 '19 at 06:24
How about you when you `import { plus } from './lib/test.js'`? Notice the js extension at the end — maazadeeb, Jan 23 '19 at 14:19
It can't. It will be consider to test.ts or test.d.ts and ignore js extension — Quoc Van Tang, Jan 23 '19 at 14:24
I just found that I must put allowJs true in compilerOptions to make js file be compiled. By the way, thank you for your support — Quoc Van Tang, Jan 23 '19 at 16:40

Christopher Slater · Accepted Answer · 2019-01-23T15:56:57.083

9

It looks like the tsconfig.json doesn't have 'allowJs' enabled because it exports declarations.

Is there a reason you are not wanting this to be a typescript file? If you change test.js to test.ts, by making it a .ts should allow it to be recognised in your index file.

UPDATE

Full chat history to get to this point can be found here. Repository used to test found here

OK so easy solution as @maaz-syed-adeeb mentions will work:

import { path } from './lib/test.js'

The reason the extension is important is because the definition file takes priority over a javascript file in a typescript environment. That is why the module import was blowing up.

To avoid specifying the .js extension you can also setup your directory structure like this:

src
|- index.ts
|- lib
  |- test.js
  |- test.d.ts
  |- index.[js|ts]

in ./lib/index file export all from test:

//./src/lib/index.[js|ts]
export * from './test'

and then import all from lib:

// ./src/index.ts
import { path } from './lib'
// or
import { path } from './lib/test.js'

If you are using a blend of javascript and typescript (say you are moving over to typescript with an existing code base), you will need to update your tsconfig.json to include so you don't get the warnings in your IDE:

{
  "compilerOptions": {
    "allowJs": true,
    "declaration": false
  }
}

This is so your javascript files will be transpiled to your destination directory along with the typescript files.

edited Jan 23 '19 at 15:56

answered Jan 23 '19 at 06:30

Christopher Slater

814
8
7

thanks for your reply. My intention is to import JS function into TS, in real case that maybe in previous I have many function write with JS language and I want to reuse it in my TS Project (loopback 4). – Quoc Van Tang Jan 23 '19 at 07:06
I've recognize that when I put this { allowJs: true, declaration: false} in my tsconfig.json file then it works but maybe the test.d.ts file may not be required in this case – Quoc Van Tang Jan 23 '19 at 07:07
I have actually created a copy of loopback 4 and without the `compilerOptions: { allowJs: true, declaration: false}` and it works with your example. So I think you can safely disregard that suggestion – Christopher Slater Jan 23 '19 at 07:19
So just to be clear, I am running `npmr run build` then `npm run start` – Christopher Slater Jan 23 '19 at 07:24
That's weird. You mean that you create a new app using lb4 app command than add a js and d.ts file like above, then import it from index.ts and it does not throw any error. For me it produce "Cannot find module './lib/test' " error – Quoc Van Tang Jan 23 '19 at 07:25
Yeah exactly that, would you like me to put the repo on github so you can compare? If the error persists, it could be more the environment than the application setup. – Christopher Slater Jan 23 '19 at 07:32
Yes, please put it on github then I will get and try it. Thank you in advance – Quoc Van Tang Jan 23 '19 at 07:33
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187169/discussion-between-christopher-slater-and-quoc-van-tang). – Christopher Slater Jan 23 '19 at 07:34
Thank you very much for explaining – Quoc Van Tang Jan 23 '19 at 16:35

NodeJS How to import JS file into TypeScript

1 Answers1

UPDATE

Linked