Explain "export =" and "export as namespace" syntax in TypeScript
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 (a) what each of these lines exactly does individually and (b) how exactly this combination works to support both types of consumers.
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 const 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.