How To Import JavaScript File Into A TypeScript File

Posted on by Christopher
Import a JavaScript file into a TypeScript file

Let’s say you already have a JavaScript file, and then all you need is to import the JavaScript file into a TypeScript file to use. It is a simple method, but sometimes we will run into problems. In this post, we will explain everything in detail.

Import JavaScript file into a TypeScript file

Assume that your directory structure is as below:

MyProject

├── src

│   ├── main.ts

│   └── greeting.js

└── tsconfig.json

To import a JavaScript file into a TypeScript file:

First, open the ‘tsconfig.json’ file and set the value of ‘allowJs’ to ‘true’. The default value of ‘allowJs’ option is ‘false’. By setting it to ‘true’, you are allowed to import JavaScript files into TypeScript files.

{
   "compilerOptions":{
       //… other settings
       "allowJs": true
    }
}

Here is your ‘greeting.js’:

const message = [‘Welcome to VietNam’ ,‘Have a nice day’]
function sayHello(name: string, message: string) {
    return `Hello ${name}, ${message}`;
}
export { message, sayHello }

Then, we will import this JavaScript file into ‘main.ts’ as follows:

import {message, sayHello} from ‘./test_file.js’;
let my_greeting = sayHello('Long', message[0]);
console.log(message);
console.log(my_greeting );

Output:

[‘Welcome to VietNam’ ,‘Have a nice day’]
“Hello Long, Welcome to VietNam”

Notice that in the above example, we use named export. If you use default export for your JavaScript file, then the import statement will not have curly braces

In ‘greeting.js’:

default export const message = ['Welcome to VietNam' ,'Have a nice day']
default export function sayHello(name: string, message: string) {
    return `Hello ${name}, ${message}`;
}

Here is the way we import into ‘main.ts’:

import message, sayHello from './test_file.js';
let my_greeting = sayHello('Long', message[1]) ;
console.log(message);
console.log(my_greeting );

Output:

[‘Welcome to VietNam’ ,‘Have a nice day’]
“Hello Long, Have a nice day”

Except for these ways, you can also use the import statement like this:

import * as greeting from './greeting.js';
console.log(greeting.message);
console.log(greeting.sayHello('Long',greeting.message[0]));
console.log(message);
console.log(sayHello('Long',message[0]));

Output:

[‘Welcome to VietNam’ ,‘Have a nice day’]
“Hello Long, Welcome to VietNam”
ERR: message is not defined
ERR: sayHello is not defined

*Note: If your code is still not working, here we give you some suggestions:

  1. Your file path must be correct. In this case, ‘main.ts’ and ‘greeting.js’ are in the same folder with ‘src’, so we can import with a file path like this ‘./greeting.js’.

When working on your project, ensure you know exactly in which directory of the files you need.

  1. You must also ensure that ‘rootDir’ contains the JavaScript you need to use. If not, you will get this error:

error TS6059: File is not under ‘rootDir’ .. ‘rootDir’ is expected to contain all source files

Check your option ‘rootDir’ in ‘tsconfig.js’ also your JavaScript’s file path for the necessary adjustments.

Summary

In this post, we learn how to import a JavaScript file into a TypeScript file, some issues you will face, and suggested solutions. I hope this information will help you with your future project.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *