There are many ways to export in JavaScript, but TypeScript uses a variety of import syntax for this purpose. The most common is import * as path from ‘path’. This article focuses on what the different import types in TypeScript mean.

Front-end development QQ group: 377786580

From the export

Many friends have asked me about the different meanings of import in TypeScript. The most typical example is the following import syntax:

import * as path from 'path'Copy the code

Many people question what this code actually means, here we will start from js export said.

First of all, JavaScript modularity scheme, in the evolution of history, there are many ways to export modules: exports, module.exports, export, export default.

Modules built into NodeJS follow the CommonJS specification with the syntax of module.exports and exports.

Module. exports = function () {// exports = function () {// exports = function () {} exports.site = 'https://tasaid.com' module.exports.name = 'linkFly'Copy the code

For example, nodeJS built-in events module source code:

ECMAScript 6 adds the syntax export and export default:

export default function () { }

export const site = 'https://tasaid.com'

export const name = 'linkFly'Copy the code

Babel, the JavaScript transcoding compiler, adds the export default syntax to ECMAScript 6. Babel-plugin-transform-es2015-modules-commonjs converts ECMAScript 6 to commonJS syntax:

Source:

export default 42;Copy the code

The compiled:

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = 42;Copy the code

Here we see that there are three syntaxes for export defaults:

// commonjs module.exports = function () {} // commonjs module.exports = function () {} // es6 export default function () {}Copy the code

The import of TypeScript

In TypeScript, there are several ways to import.

// commonJS module import * as xx from 'xx' // es6 module import xx from 'xx' // Export = xx import xx = require('xx') // No type declaration, default import any const xx = require('xx')Copy the code

In tsconfig. Json, allowSyntheticDefaultImports will affect the import type checking rules of grammar, this again below.

import * as xx from ‘xx’

The import * as xx from ‘xx’ syntax is typically used to import modules that use module.exports.

import * as path from 'path'Copy the code

This is because most modules in NodeJS are exported via the module.exports, exports.xx syntax.

import xx from ‘xx’

By default, the syntax for import xx from ‘xx’ only applies to ECMAScript 6 export default exports:

Module foo:

export default function () { 
  console.log('https://tasaid.com') 
}Copy the code

ES6 module import:

import foo from './foo'
foo()Copy the code

Babel compiles the export default syntax of es6 modules into the exports.default syntax.

TypeScript does not recognize this syntax by default, and if a module export is an exports.default export, importing xx from ‘xx’ will cause an error.

So the tsconfig. Json, a allowSyntheticDefaultImports option, is to make compatible this syntax.

If allowSyntheticDefaultImports set to true, then the test whether import module is ES6 module, if not, then look for exports in a module. The default is derived.

Thus achieving compatibility for exports.default.

See this animation for the effect:

I personally don’t recommend to open the allowSyntheticDefaultImports option, under normal circumstances is the way I take will deafult rename:

import { default as foo } from 'foo'Copy the code

import xx = require(‘xx’)

Import xx = require(‘xx’) import xx = require(‘xx’) is a library used to import commonJS modules. The exception is that the type declaration of the library is export = xx:

Foo. Js source code:

module.exports = () => { 
  console.log('https://tasaid.com') 
}Copy the code

Foo.d. ts type declaration file source:

declare function foo(): void;
export = fooCopy the code

Bar. Ts references:

import foo = require('./foo')

foo()Copy the code

I talked about the impact of TypeScript type declaration files on imports and exports in JavaScript and TypeScript Intersection — Type Definition Files (*.d.ts).

const xx = require(‘xx’)

When a module does not have a type declaration file, you can import the module using the original Require () method of CommonJS, which defaults the module to any.

conclusion

To summarize, in TypeScript, there are several ways to import, which correspond to JavaScript export.

// commonJS module import * as xx from 'xx' // es6 module import xx from 'xx' // commonJS module Export = xx import xx = require('xx') // No type declaration, default import any const xx = require('xx')Copy the code

In view of Babel compiled exports. The default syntax, ts provided allowSyntheticDefaultImports options can support, just personal is not recommended.

I suggest renaming default.

import { default as foo } from 'foo'Copy the code

For more information on how TypeScript type declaration files (*.d.ts) affect import and export, see my previous article “JavaScript and TypeScript Intersection: Type Definition Files.”

Front-end development QQ group: 377786580

Citations and references

  • Github – allowSyntheticDefaultImports should be the default?
  • Exports, Module. Exports, export, export default