Is it possible to use ES6 import and require in Typescript 2?

Question

Is it possible to use ES6 import and require in Typescript 2?

In my Angular2 app, I have a class exported using ES6 modules:

//File = init.todos.ts

export class Init {
   load() {
      ...
    }
}

I am importing this class into another component like this:

//File = todo.service.ts

import { Init } from './init.todos'

Everything works as expected.

However, when I change the loading mechanism to commonjs:

//File = init.todos.ts
export class Init {
    load() {
       ...
    }
}
module.exports.Init = Init;

When trying to require it:

//File = todo.service.ts
var  Init = require("./init.todos");

I encounter these errors:

...myApp/src/app/todo.service.ts (4,13): Cannot find name 'require'.) ...myApp/src/app/todo.service.ts (12,14): Property 'load' does not exist on type 'TodoService'.)

https://i.sstatic.net/akUPR.png

Question:

How can I also load commonjs modules using require?

Tsconfig.json:

{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "baseUrl": "src",
        "module": "system",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2016",
            "dom"
        ]
    }
}

Here are the config files :

javascript angular typescript module webpack

Answer 1

Answer №1

Ever since version 1.5 was released, Typescript has embraced the ES6 style of imports.

Your code can remain untouched

//File = init.todos.ts

export class Init {
   load() {
      ...
    }
}

//File = todo.service.ts

import { Init } from './init.todos'

If you relocate the module property in your tsconfig.json to commonjs, the transpiler will produce commonjs compatible javascript allowing you to leverage and engage with the entire nodeJS ecosystem.

"compileOptions": {
    ...
    "module": "commonjs"
    ...
}

When wanting to import a preexisting NodeJS module into your typescript code, several scenarios may occur

the module includes incorporated Typescript Definition Files (with a "typings" entry in "package.json"). In this case, import the module using the ES6 syntax and you're all set (import * as blah from 'blah'). immutable.js serves as a great example
the module lacks Definition files but one is on hand at DefinitelyTyped, simply
- execute npm install @types/blah to acquire the declarations for your project
- and import the module as usual: import * as blah from 'blah'
the module doesn't have a definition file
- you can create one, just add it to your project after naming it blah.d.ts. DefinitelyTyped offers a guide on this
- opt to proceed without typings, simply utilize NodeJS require() const blah = require('blah'), and blah assumes type any (indicating that blah abstains from typing)

(in the interest of thoroughness, I could delve into the allowJS compiler option introduced since version 1.8, however, that deserves a discussion all its own)

Answer 2

Ever since version 1.5 was released, Typescript has embraced the ES6 style of imports.

Your code can remain untouched

//File = init.todos.ts

export class Init {
   load() {
      ...
    }
}

//File = todo.service.ts

import { Init } from './init.todos'

If you relocate the module property in your tsconfig.json to commonjs, the transpiler will produce commonjs compatible javascript allowing you to leverage and engage with the entire nodeJS ecosystem.

"compileOptions": {
    ...
    "module": "commonjs"
    ...
}

When wanting to import a preexisting NodeJS module into your typescript code, several scenarios may occur

the module includes incorporated Typescript Definition Files (with a "typings" entry in "package.json"). In this case, import the module using the ES6 syntax and you're all set (import * as blah from 'blah'). immutable.js serves as a great example
the module lacks Definition files but one is on hand at DefinitelyTyped, simply
- execute npm install @types/blah to acquire the declarations for your project
- and import the module as usual: import * as blah from 'blah'
the module doesn't have a definition file
- you can create one, just add it to your project after naming it blah.d.ts. DefinitelyTyped offers a guide on this
- opt to proceed without typings, simply utilize NodeJS require() const blah = require('blah'), and blah assumes type any (indicating that blah abstains from typing)

(in the interest of thoroughness, I could delve into the allowJS compiler option introduced since version 1.8, however, that deserves a discussion all its own)

Answer 3

Answer №2

TypeScript is fully compliant with ES6 standards. Utilize the ES6 module loading syntax within your TypeScript source code files:

import { SomeType } from './some.module';

When TypeScript transpiles to regular JavaScript, you have the flexibility to choose which module system to target:

"compileOptions": {
    "module": "commonjs" (or system, umd, amd)
}

Regardless of the module system you select, it's crucial to ensure that you include the necessary scripts and configuration to properly load the modules. For example, SystemJS, RequireJS, etc.

For practice, experiment with targeting different module loaders and examine the resulting .js file - the differences will be apparent.

Answer 4

TypeScript is fully compliant with ES6 standards. Utilize the ES6 module loading syntax within your TypeScript source code files:

import { SomeType } from './some.module';

When TypeScript transpiles to regular JavaScript, you have the flexibility to choose which module system to target:

"compileOptions": {
    "module": "commonjs" (or system, umd, amd)
}

Regardless of the module system you select, it's crucial to ensure that you include the necessary scripts and configuration to properly load the modules. For example, SystemJS, RequireJS, etc.

For practice, experiment with targeting different module loaders and examine the resulting .js file - the differences will be apparent.

Answer 5

Answer №3

Your question actually revolves around the issue not being with the require(...) method, but rather with referencing an error in Init. It seems like you are trying to lazy load modules using require. However, the problem lies in loading a class that contains an instance method load (which is not a class method - if you want it to be, you must declare it as static). Therefore, you need to create an instance before using it since require(...) returns any by default.

declare function require(id: string): any;

If you want TypeScript to infer the type correctly, you should declare the return type of require(). For example:

let foo: typeof Foo = require('foo')

. I noticed that the ts-jest test passes when module is anything except system, indicating that lazy loading is in play and the issue does not lie with the module itself. Here's a snippet of my test code:

Test

// To infer types for TypeScript
// This uses reference-elision optimization,
// so the module is loaded only when needed.
// Using InitClass as a type will be skipped.
import {Init as InitClass} from  "./init.todos";

test("TypeScript dynamic loading supports inferred types", () => {
    let Init: typeof InitClass = require("./init.todos").Init;

    let it = new Init();
    expect(it.load()).toEqual("bar");
});

Answer 6

Your question actually revolves around the issue not being with the require(...) method, but rather with referencing an error in Init. It seems like you are trying to lazy load modules using require. However, the problem lies in loading a class that contains an instance method load (which is not a class method - if you want it to be, you must declare it as static). Therefore, you need to create an instance before using it since require(...) returns any by default.

declare function require(id: string): any;

If you want TypeScript to infer the type correctly, you should declare the return type of require(). For example:

let foo: typeof Foo = require('foo')

. I noticed that the ts-jest test passes when module is anything except system, indicating that lazy loading is in play and the issue does not lie with the module itself. Here's a snippet of my test code:

Test

// To infer types for TypeScript
// This uses reference-elision optimization,
// so the module is loaded only when needed.
// Using InitClass as a type will be skipped.
import {Init as InitClass} from  "./init.todos";

test("TypeScript dynamic loading supports inferred types", () => {
    let Init: typeof InitClass = require("./init.todos").Init;

    let it = new Init();
    expect(it.load()).toEqual("bar");
});

Is it possible to use ES6 import and require in Typescript 2?

Answer №1

Answer №2

Answer №3

Test

Similar questions

Checking nested arrays recursively in Typescript

JS Equal Heights is a JavaScript plugin designed to ensure

Guidelines for verifying that a specified time falls within a designated range using Javascript

Using PHP, HTML, and JavaScript to generate a dropdown list from a database

Using React Higher Order Components with several different components

JavaScript: Manipulating Data with Dual Arrays of Objects

Storing HTML values in a Meteor database is a common practice for web

adhesive section on the left side with a defined lower boundary

Validation of time picker consistently returns false

Issue with binding click events on dynamically generated elements

Ways to stop Bootstrap 4 dropdown from appearing when clicking on an input field?

Is it feasible to choose the component generated by this element?

The Raycast function seems to be failing to detect the GlTF file in Three.js

Tips for concealing or revealing an existing element with *ngfor

Refreshing a paginated mat-table in Angular results in missing row data

I am looking to develop a customizable table where the user can input their desired information

The microservices system fails to initialize

Tips for optimizing Angular source code to render HTML for better SEO performance

Tree-view of Editable Boxes in Vue.js

Identifying the element with the specified ID within the table's <th> tag in JavaScript