背景

TypeScript 3.8 带来了一个新个性：仅仅导入 / 导出申明。

在上一篇文章中，咱们应用了这个个性，解决了: 引入类型文件报错的问题。

其实这个个性并不简单，然而咱们须要理解其背地的机制原理，并理解 Babel 和 TypeScript 是如何一起工作的。

本文次要内容：

什么是「仅仅导入 / 导出申明」
Babel和TypeScript是如何一起工作的

注释

首先，先介绍一下这个个性。

什么是「仅仅导入 / 导出申明」

为了能让咱们导入类型，TypeScript 重用了 JavaScript 导入语法。

例如在上面的这个例子中，咱们确保 JavaScript 的值 doThing 以及 TypeScript 类型 Options 一起被导入:

// ./foo.tsinterface Options {  // ...}export function doThing(options: Options) {  // ...}// ./bar.tsimport { doThing, Options } from './foo.js';function doThingBetter(options: Options) {  // do something twice as good  doThing(options);  doThing(options);}

这很不便的，因为在大多数的状况下，咱们不用放心导入了什么 —— 仅仅是咱们想导入的内容。

遗憾的是，这仅是因为一个被称之为「导入省略」的性能而起作用。

当 TypeScript 输入一个 JavaScript 文件时，TypeScript 会辨认出 Options 仅仅是当作了一个类型来应用，它将会删除 Options。

// ./foo.jsexport function doThing(options: Options) {  // ...}// ./bar.jsimport { doThing } from './foo.js';function doThingBetter(options: Options) {  // do something twice as good  doThing(options);  doThing(options);}

在通常状况下，这种行为都是比拟好的。然而它会导致一些其余问题。

首先，在一些场景下，TypeScript 会混同导出的到底是一个类型还是一个值。

比方在上面的例子中， MyThing 到底是一个值还是一个类型？

import { MyThing } from './some-module.js';export { MyThing };

如果单从这个文件来看，咱们无从得悉答案。

如果 Mything 仅仅是一个类型，Babel 和 TypeScript 应用的 transpileModule API 编译出的代码将无奈正确工作，并且 TypeScript 的 isolatedModules 编译选项将会提醒咱们，这种写法将会抛出谬误。

问题的关键在于，没有一种形式能辨认它仅仅是个类型，以及是否应该删除它，因而「导入省略」并不够好。

同时，这也存在另外一个问题，TypeScript 导入省略将会去除只蕴含用于类型申明的导入语句。

对于含有副作用的模块，这造成了显著的不同行为。于是，使用者将会不得不增加一条额定的申明语句，来确保有副作用。

// This statement will get erased because of import elision.import { SomeTypeFoo, SomeOtherTypeBar } from './module-with-side-effects';// This statement always sticks around.import './module-with-side-effects';

一个咱们看到的具体例子是呈现在 Angularjs（1.x）中， services 须要在全局在注册（它是一个副作用），然而导入的 services 仅仅用于类型申明中。

// ./service.tsexport class Service {  // ...}register('globalServiceId', Service);// ./consumer.tsimport { Service } from './service.js';inject('globalServiceId', function(service: Service) {  // do stuff with Service});

后果 ./service.js 中的代码不会被执行，导致在运行时会被中断。

在 TypeScript 3.8 版本中，咱们增加了一个仅仅导入/导出 申明语法来作为解决形式。

import type { SomeThing } from "./some-module.js";export type { SomeThing };

import type 仅仅导入被用于类型注解或申明的申明语句，它总是会被齐全删除，因而在运行时将不会留下任何代码。

与此类似，export type 仅仅提供一个用于类型的导出，在 TypeScript 输入文件中，它也将会被删除。

值得注意的是，类在运行时具备值，在设计时具备类型。它的应用与上下文无关。

当应用 import type 导入一个类时，你不能做相似于从它继承的操作。

import type { Component } from "react";interface ButtonProps {    // ...}class Button extends Component<ButtonProps> {    //               ~~~~~~~~~    // error! 'Component' only refers to a type, but is being used as a value here.    // ...}

如果在之前你应用过 Flow，它们的语法是类似的。

一个不同的中央是咱们增加了一个新的限度条件，来防止可能混同的代码。

// Is only 'Foo' a type? Or every declaration in the import?// We just give an error because it's not clear.import type Foo, { Bar, Baz } from "some-module";//     ~~~~~~~~~~~~~~~~~~~~~~// error! A type-only import can specify a default import or named bindings, but not both.

与 import type 相关联，咱们提供来一个新的编译选项：importsNotUsedAsValues，通过它能够来管制没被应用的导入语句将会被如何解决，它的名字是暂定的，然而它提供来三个不同的选项。

remove，这是当初的行为 —— 抛弃这些导入语句。这依然是默认行为，没有破坏性的更改
preserve，它将会保留所有的语句，即便是素来没有被应用。它能够保留副作用。
error，它将会保留所有的导入（与 preserve 选项雷同）语句，然而当一个值的导入仅仅用于类型时将会抛出谬误。如果你想确保没有意外导入任何值，这会是有用的，然而对于副作用，你依然须要增加额定的导入语法。

对于该个性的更多信息，参考该 PR。

Babel 和 TypeScript 是如何一起工作的

TypeScript 做了两件事

将动态类型查看增加到 JavaScript 代码中。
将 TS + JS 代码转换为各种JS版本。

Babel 也做第二件事。

Babel的办法（特地是transform-typescript插件时）是: 先删除类型，而后进行转换。

这样，就即能够应用 Babel 的所有长处，同时依然可能提供 ts 文件。

看个例子：

babel 编译前：

// example.tsimport { Color } from "./types";const changeColor = (color: Color) => {  window.color = color;};

babel 编译后：

// example.jsconst changeColor = (color) => {  window.color = color;};

在这里，babel 不能通知 example.ts 那个 Color 实际上是一个类型。

因而，babel 也被迫谬误地将此申明保留了转换后的代码中。

为什么会这样？

Babel在转译过程中一次明确地解决一个文件。

大略是因为 babel 团队并不想像 TypeScript 那样，在雷同的类型解析过程中进行构建，只是为了删除这些类型吧。

isolatedModules

isolatedModules 是什么

isolatedModules是TypeScript编译器选项，旨在充当保护措施。

tsc 做类型查看时，当监测到 isolatedModules 是开启的，就会报类型谬误。

如果谬误未解决，将影响独立解决文件的编译工具（babel）。

From TypeScript docs:

Perform additional checks to ensure that separate compilation (such as with transpileModule or @babel/plugin-transform-typescript) would be safe.

From Babel docs:

--isolatedModules This is the default Babel behavior, and it can't be turned off because Babel doesn't support cross-file analysis.

换句话说，每个ts文件都必须可能独立进行编译。

该 isolatedModules 标记可避免咱们引入不置可否的import。

上面看两个具体的例子看几个例子，理解 isolatedModules 标记的重要性。

1. 混合导入，混合导出

在这里，咱们采纳在 types.ts 文件中定义的类型，而后从中从新导出它们。

关上 isolatedModules 时，此代码不会通过类型查看。

// types.tsexport type Playlist = {  id: string;  name: string;  trackIds: string[];};export type Track = {  id: string;  name: string;  artist: string;  duration: number;};// lib-ambiguous-re-export.tsexport { Playlist, Track } from "./types";export { CreatePlaylistRequestParams, createPlaylist } from "./api";

Babel 转换后：

// dist/types.js--empty--// dist/lib-ambiguous-re-export.jsexport { Playlist, Track } from "./types";export { CreatePlaylistRequestParams, createPlaylist } from "./api";

报错：

一些了解：

Babel 从咱们的types模块中删除了所有内容，它仅蕴含类型。
Babel 没有对咱们的 lib 模块进行任何转换。Playlist 并且 Track 应该由 Babel 移除。从Node 的角度来看，Node 做模块解析时，会发现 types.js 中引入的文件是空的，报错：文件不存在。
如截图所示，tsc 类型查看过程立刻将这些含糊的从新导出报告为谬误。

2. 显式类型导入，显式类型导出

这次，咱们明确地将中的类型从新导出lib-import-export.ts。

关上 isolatedModules时，此代码将通过 tsc 类型查看。

编译前：

// types.tsexport type Playlist = {  id: string;  name: string;  trackIds: string[];};// lib-import-export.tsimport {  Playlist as PlaylistType,  Track as TrackType,} from "./types";import {  CreatePlaylistRequestParams as CreatePlaylistRequestParamsType,  createPlaylist} from "./api";export type Playlist = PlaylistType;export type Track = TrackType;export type CreatePlaylistRequestParams = CreatePlaylistRequestParamsType;export { createPlaylist };

编译后：

// dist/types.js--empty-- TODO or does babel remove it all together?// lib-import-export.jsimport { createPlaylist } from "./api";export { createPlaylist };

此时：

Babel仍输入一个空 types.js 文件。但这没关系，因为咱们编译的lib-import-export.js器没再援用它。

TypeScript 3.8

如先前介绍， TypeScript 3.8 引入了新的语法 -- 「仅仅导入 / 导出申明」。

该语法在应用时为类型解析过程减少了确定性。

当初，编译器（无论是tsc，babel还是其余）都将可能查看单个文件，并勾销导入或导出（如果它是TypeScript类型）。

import type ... from — 让编译器晓得您要导入的内容相对是一种类型。

export type ... from — 一样，仅用作导出。

// src/lib-type-re-export.tsexport type { Track, Playlist } from "./types";export type { CreatePlaylistRequestParams } from "./api";export { createPlaylist } from "./api";// 会被编译为：// dist/lib-type-re-export.jsexport { createPlaylist } from "./api";

关于javascript:你不知道的-import-type

背景

注释

什么是「仅仅导入 / 导出申明」

Babel 和 TypeScript 是如何一起工作的

TypeScript 做了两件事

isolatedModules

isolatedModules 是什么

1. 混合导入，混合导出

2. 显式类型导入，显式类型导出

TypeScript 3.8

更多参考

背景

注释

什么是「 仅仅导入 / 导出申明 」

Babel 和 TypeScript 是如何一起工作的

TypeScript 做了两件事

isolatedModules

isolatedModules 是什么

1. 混合导入， 混合导出

2. 显式类型导入，显式类型导出

TypeScript 3.8

更多参考

什么是「仅仅导入 / 导出申明」

1. 混合导入，混合导出