Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make TypeScript generate a CommonJS valid module?

Let's say I have a module in TypeScript:

export default function myModule(name: string): void {
  alert(`Hello, ${name}!`)
}

When I run tsc to build the above code, and try to import the generated code through Node.js (pure JavaScript):

const myModule = require('./dist/myModule.js')
myModule('Luiz') // ERROR! `myModule` is `undefined`

The only way to make it work is by using .default after the require(), which is not what I want:

//                                            ↓↓↓↓↓↓↓↓
const myModule = require('./dist/myModule.js').default
myModule('Luiz') // Now it works.

How can I make TypeScript generate an output that I can use later as a Node.js module (as I'm publishing the package into NPM) without that .default property? Just like this:

const myModule = require('my-module')

Thanks in advance. :)

like image 484
Luiz Felipe Avatar asked May 31 '19 21:05

Luiz Felipe


People also ask

Can I use CommonJS in TypeScript?

Yes, you can use it in a same manner that you would use it in Javascript. Typescript is superset of Javascript, all things possible in Javascript are also possible in Typescript.

How do I compile a module in TypeScript?

Set Target Module in Visual Studio Go to the TypeScriptBuild tab in the property window and set the Module System to AMD, as shown below. Now, Visual Studio will create JavaScript files for all the TypeScript modules targeting the require. js module loader for web app.

How do I use CommonJS with typescript?

ES Module Syntax with CommonJS Behavior TypeScript has ES Module syntax which directly correlates to a CommonJS and AMD require. Imports using ES Module are for most cases the same as the require from those environments, but this syntax ensures you have a 1 to 1 match in your TypeScript file with the CommonJS output: import fs = require("fs");

How to migrate typescript from AMD to CommonJS?

When defining external module in TypeScript targeting CommonJS or AMD, each file is considered as a module. So it’s optional to use internal module with in external module. If you are migrating TypeScript from AMD to CommonJs module systems, then there is no additional work needed.

How do I export a module in typescript?

TypeScript supports export =to model the traditional CommonJS and AMD workflow. The export =syntax specifies a single object that is exported from the module. This can be a class, interface, namespace, function, or enum. When exporting a module using export =, TypeScript-specific import module = require("module")must be used to import the module.

How to re-exporting a default field in typescript?

default exports can also be just values: With TypeScript 3.8, you can use export * as ns as a shorthand for re-exporting another module with a name: This takes all of the dependencies from a module and makes it an exported field, you could import it like this:


1 Answers

Short Answer

Use export = to build a CommonJS module that exports a function.

The TypeScript docs say:

TypeScript supports export = to model the traditional CommonJS and AMD workflow... The export = syntax specifies a single object that is exported from the module. This can be a class, interface, namespace, function, or enum.

Full Setup

myModule.ts

export = function myModule(name: string): void {
  console.log(`Hello, ${name}!`)
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  }
}

myModule.js (output)

"use strict";
module.exports = function myModule(name) {
    console.log("Hello, " + name + "!");
};

demo.js (usage)

const myModule = require('./my-module');

myModule('Luiz'); // Hello, Luiz!
like image 132
Shaun Luttin Avatar answered Nov 09 '22 10:11

Shaun Luttin