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:
- 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.
- 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:
- Import a Type from Another file using TypeScript
- How to run a TypeScript file from the Command line
- How to read a File’s contents in TypeScript
- File name differs from included file name only in casing

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js