Import a JavaScript file into a TypeScript file

Import a JavaScript file into a TypeScript file #

To import a JavaScript file into a TypeScript file:

1. Set allowJs to true in your tsconfig.json file.
2. Import named exports as import { getEmployee } from './employee'.
3. Import default exports as import getEmployee from './employee'.

The first thing you should do is make sure you have set allowJs to true in your tsconfig.json file.

Copied!
{
  "compilerOptions": {
    // ... other settings
    "allowJs": true
  }
}

Here is the JavaScript file we will import in a TypeScript file.

Copied!
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
export function getEmployee(id, name, salary) {
  return {
    id,
    name,
    salary,
  };
}

And here is how we import the JavaScript file in an index.ts file.

Copied!
import { getEmployee } from './employee';

type Employee = {
  id: number;
  name: string;
  salary: number;
};

const emp = getEmployee(1, 'James', 100) as Employee;

console.log(emp.id); // 👉️ 1
console.log(emp.name); // 👉️ "James"
console.log(emp.salary); // 👉️ 100

Make sure to correct the path to the employee.js file if you have to.

The example above assumes that the employee.js file and index.ts are located in the same directory. If, for example, your employee.js file was one directory up, you would import it as import { getEmployee } from '../employee'.

The example above uses a named import. If your JavaScript file uses a default export, remove the curly braces in the import statement.

Copied!
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
// 👇️ default export
export default function getEmployee(id, name, salary) {
  return {
    id,
    name,
    salary,
  };
}

And here is how you would import the default export into your TypeScript file.

Copied!
// 👇️ default import
import getEmployee from './employee';

type Employee = {
  id: number;
  name: string;
  salary: number;
};

const emp = getEmployee(1, 'James', 100) as Employee;

console.log(emp.id); // 👉️ 1
console.log(emp.name); // 👉️ "James"
console.log(emp.salary); // 👉️ 100

If this doesn't work either, try using the import * as employee syntax.

Copied!
import * as employee from './employee';

type Employee = {
  id: number;
  name: string;
  salary: number;
};

const emp = employee.getEmployee(1, 'James', 100) as Employee;

console.log(emp.id); // 👉️ 1
console.log(emp.name); // 👉️ "James"
console.log(emp.salary); // 👉️ 100

Make sure to specify the correct path to the employee.js file.

You should also make sure that the JavaScript file you are importing is located under your rootDir.

If your JavaScript file is not under your rootDir, you would get an error: "File is not under 'rootDir'. 'rootDir' is expected to contain all source files.".

The allowJs setting allows JavaScript files to be imported inside your TypeScript files.

The setting basically allows JavaScript and TypeScript files to live in the same project.

The allowJs option is set to false by default.

Note that there is another setting checkJs. When checkJs is set to true, errors are reported in JavaScript files.

If you don't want to get TypeScript errors in your JavaScript files, set checkJs to false in your tsconfig.json file.

The checkJs option is set to false by default.

Copied!
{
  "compilerOptions": {
    // ... other options
    "allowJs": true,
    "checkJs": false
  }
}

Now you won't get type checking errors in your JavaScript files.