6

I have an exported class in my working Angular2 app using ES6 module: 

//File = init.todos.ts

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

I'm importing this class from another component via : 

//File = todo.service.ts

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

It works as expected.

However if I change the loading mechanism to commonjs : 

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

Requiring it: 

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

— I get those 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'.)

enter image description here

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 :

tslint.json

tsconfig.json

package.json

angular-cli.json

webpack.config.js

Improve this question
10
  • This happens because you have "module": "system". There's no require function in SystemJS. Commented Mar 15, 2017 at 15:56
  • @estus I've already changed to 'commonjs' and still I get this error Commented Mar 15, 2017 at 15:59
  • in tsconfig, change "module" to "commonjs" and keep the ES6 syntax e.g. `import { Init } from './init.todos'. Commented Mar 15, 2017 at 15:59
  • @BrunoGrieder Oh , so the imported module will have module.exports but I still should import it via es6 syntax ? Commented Mar 15, 2017 at 16:00
  • Yes. Typescript adopted ES6 style imports some time ago (1.5 or 1.7). If you use const x = require('blah'), you will be using NodeJS/CommonJS require and "lose" typing since xwill be mapped to any. This may be useful to import JS librairies which are not typed though Commented Mar 15, 2017 at 16:02

3 Answers 3

Reset to default
9

Since version 1.5, Typescript has adopted the ES6 style of imports.

You can keep your code "as is"

//File = init.todos.ts

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

//File = todo.service.ts

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

By moving the property module in tsconfig.json to commonjs, the transpiler will generate commonjs compatible javascript which will allow you to benefit from, and contribute to, the full nodeJS ecosystem.

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

If you wish to import an existing NodeJS module in your typescript code, a few things may happen

  • the module ships with embedded Typescript Definition Files (there is a "typings" entry in "package.json"). In that case, import the module using the ES6 syntax and you are good to go (import * as blah from 'blah'). immutable.js is a good example of such a library

  • the module does not ship with Definition files but there is one available on DefinitelyTyped, simply

    • run npm install @types/blah to get the definitions in your project
    • and import the module as usual: import * as blah from 'blah'

  • the module does not have a definition file

    • you can craft one, simply add it to your project after naming it blah.d.ts. DefinitelyTyped has a guide on this
    • you can decide to go without typings, simply use NodeJS require() const blah = require('blah'), and blah will have type any (which really means that blah opted out of typing)

(for sake of completeness, I could add the allowJS compiler option available since 1.8, but that is a whole subject in itself)

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I'm sorry but did you mean in the second case : "the module does not ship with Definition files but there is one available on DefinitelyTyped, simply" - that I can import it via a "regular require". right ? (I mean sure I can get it via ES6 import , but the whole point is that the d.ts allows TS to recognize the require , no?)
TS does not "recognize the require". The point of having definition files is that the JS module can be used as if it were written in typescript and hence imported using typescript import syntax, which is the ES6 import syntax
Yeah , that's what I meant , it allows the TS compiler to recognize new d.ts'ed keywords. (correct me if I 'm wrong). but still I want to ask about the second case you mentioned. Even If I add blah.d.ts which my friend sent me with his blah library ( commonjs) - Typescript only will be muting errors regarding the require ('blah') which I'll have in my code. right ? I mean I will have to have another module loader ( browserify/webpack) in order for the final JS to actual reference those required file. right?
Yes. You need a module bundler such as browserify or webpack. Using require or allowJs you may be able to avoid using one but you lose the benefit of typings
:-) ( finally i'm starting to get it.) - Ok if so - what difference does it make if I change the module in tsconfig ? I mean - what does it have to do with TS at first place ? From My testings - TS search es6 syntax and convert it. It doesn't care what you have in your code even if it's invalid. Do you see where is my misunderstanding ? what does TS has to do with the tsconfig's module settings ? I mean it's up to webpack/browserify to "require" libraries (except es6 import built inTS).
|
2

TypeScript is ES6 compliant. Use ES6 module loading syntax within your TypeScript source files: 

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

When TypeScript compiles to regular JavaScript, you can target a module system of your choosing: 

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

Whatever target module system you choose, you need to ensure that you include the necessary scripts and configuration to load the module. i.e. SystemJS, RequireJS, etc.

As an exercise, try targeting different module loaders, and inspect the .js file - you'll see what I mean.

Improve this answer

Comments

0

the problem of your question actually is not the require(...) method.it is that you reference error Init.I think you want to lazy load modules via require.but you load class that contains an instance method load(it is not a class method,if you want you must declaring it as static).so you must create an instance before you use it.by default,require(...) return any

declare function require(id: string): any;

if you want typescript infer type correctly you must declare require() return type,e.g:let foo:typeof Foo = require('foo').I found that the ts-jest test pass when module is anything except system because it is lazy loading,not execute test definition immediately,so I'm sure the problem is not the module. here is my test code:

Test

//for inferer type for typescript
//This leverages the reference-elision optimization,
//so that the module is only loaded when needed.
//so use InitClass as a type will skipped.
import {Init as InitClass} from  "./init.todos";

test("typescript dynamic load supports inferer types", () => {
    let Init: typeof InitClass = require("./init.todos").Init;

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.