Explain "export =" and "export as namespace" syntax in TypeScript

Question

I am trying to make use of the type declarations files in the DefinitelyTyped repository. Many of these files use the following pattern:

export = React;
export as namespace React;

Googling around, I've found references to this being used to make a declaration file usable in both module-based and non-module-based systems. However, I'm struggling to find a clear explanation of:

what each of these lines exactly does individually and
how exactly this combination works to support both types of consumers.

Hmm... Seems you're not the first to have this question. Not a dupe, since that one wasn't answered either. You might consider tagging this with react as well to see if react experts know. — Heretic Monkey
– Heretic Monkey, Commented Jun 30, 2017 at 13:39

strager · Accepted Answer · 2023-11-01 02:26:28Z

56

The first form is used for CommonJS and AMD module systems. You have to match the export = React with import React = require('./React')

See the documentation which gives this example:

ZipCodeValidator.ts

let numberRegexp = /^[0-9]+$/;
class ZipCodeValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}
export = ZipCodeValidator;

Test.ts

import zip = require("./ZipCodeValidator");

// Some samples to try
let strings = ["Hello", "98052", "101"];

// Validators to use
let validator = new zip();

// Show whether each string passed each validator
strings.forEach(s => {
  console.log(`"${ s }" - ${ validator.isAcceptable(s) ? "matches" : "does not match" }`);
});

The export as namespace form creates a global variable so it can be used without importing, but you may still import it with the import { name } from "some-library" form of import. See the documentation which gives this example:

math-lib.d.ts

export function isPrime(x: number): boolean;
export as namespace mathLib;

The library can then be used as an import within modules:

import { isPrime } from "math-lib";
isPrime(2);
mathLib.isPrime(2); // ERROR: can't use the global definition from inside a module

It can also be used as a global variable, but only inside of a script. (A script is a file with no imports or exports.)

mathLib.isPrime(2);

Here you have a generic type library which doesn't know which module system is being used so it tries to cover all bases.

edited Nov 1, 2023 at 2:26

strager

90.3k27 gold badges138 silver badges180 bronze badges

answered Jun 30, 2017 at 15:03

Duncan

96.4k15 gold badges129 silver badges160 bronze badges

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

4 Comments

ChaseMedallion Over a year ago

Thanks Duncan. I had read these two samples before posting. I still find myself unsure of the meaning of "but you may still import it with the import { name } from "some-library" form of import". What is name in this example? Specifically, when both export = and export as namespace are used together, what are the implications for import from style imports?

AlexandruC Over a year ago

@Duncan, how would one extend mathLib namespace, but also keeping it in the global scope (no module augmentation)

Duncan Over a year ago

@AlexandruC, no idea. Post that as a separate question?

Adrian Over a year ago

@AlexandruC the link is broken

Collectives™ on Stack Overflow

Explain "export =" and "export as namespace" syntax in TypeScript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related