ES6中的导入功能

Question

I came across this source code. I do not understand the first line:

import type { a, b, c, d } from 'types'

What is the difference with

import { a, b, c, d } from 'types' Could you please explain? Thanks

 import type { a, b, c, d } from 'types'// not sure what it does import { a, b, c, d } from 'types' // I am familar with this 

Answer 1

This is not vanilla JavaScript import usage. This is probably Flow, or a closely-related transpiled language.

I found a blog post from the Flow project entitled Announcing Import Type . I don't know Flow, but it looks like a strictly-type superset of JavaScript. The import type statement is how you import type information about a class without importing the class itself. They give an example where you might want to declare stirctly-typed formal arguments in a function and need to import the appropriate types:

import type {Crayon, Marker} from 'WritingUtensils';
module.exports = function junkDrawer(x: Crayon, y: Marker): void {}

Answer 2

It is importing type definitions from the file.

// Here you are importing the actual method, variable from the file.
import xyz from 'abc';`

// Here you are importing the type defination of xyz
import type { xyz } from 'abc';

Now if you want to use it as

let a: xyz = new xyz();

Answer 3

From MDN, although the missing comas from OP is weird:

Importing defaults: It is possible to have a default export (whether it is an object, a function, a class, etc.). The import statement may then be used to import such defaults.

The simplest version directly imports the default:

import myDefault from '/modules/my-module.js';

It is also possible to use the default syntax with the ones seen above (namespace imports or named imports). In such cases, the default import will have to be declared first. For instance:

import myDefault, {foo, bar} from '/modules/my-module.js'; // specific, named imports

In other words, this will import the default as myDefault, and then import the named exports.