TypeScript 里的 module 概念

Modules

JavaScript 在处理模块化代码方面有着悠久的历史。 TypeScript 自 2012 年问世以来，已经实现了对许多这些格式的支持，但随着时间的推移，社区和 JavaScript 规范已经融合到一种称为 ES 模块（或 ES6 模块）的格式上。 您可能知道它是 import/export 语法。

ES Modules 于 2015 年添加到 JavaScript 规范中，到 2020 年在大多数 Web 浏览器和 JavaScript 运行时中获得普遍支持。

为了重点，手册将涵盖 ES 模块及其流行的前体 CommonJS module.exports = 语法，您能够在模块下的参考部分中找到有关其余模块模式的信息。

How JavaScript Modules are Defined

在 TypeScript 中，就像在 ECMAScript 2015 中同样，任何包含顶级导入或导出的文件都被视为一个模块。

相反，没有任何顶级导入或导出声明的文件被视为脚本，其内容在全局范围内可用（所以也对模块可用）。

模块在它们本身的范围内执行，而不是在全局范围内。 这意味着在模块中声明的变量、函数、类等在模块外部不可见，除非它们使用导出形式之一显式导出。 相反，要使用从不一样模块导出的变量、函数、类、接口等，必须使用其中一种导入形式导入。

非模块

在咱们开始以前，了解 TypeScript 将什么视为模块很重要。 JavaScript 规范声明任何没有导出或顶级 await 的 JavaScript 文件都应被视为脚本而不是模块。

在脚本文件中，变量和类型被声明为在共享全局范围内，而且假设您将使用 --outFile 编译器选项将多个输入文件链接到一个输出文件中，或者在其中使用多个
\<script> 标记 您的 HTML 以加载这些文件（以正确的顺序！）。

若是您有一个当前没有任何导入或导出的文件，但您但愿被视为一个模块，请添加如下行：

export {};

这会将文件更改成不导出任何内容的模块。 不管您的模块目标如何，此语法都有效。

ES Module 语法

文件能够经过 export default 声明主导出：

// @filename: hello.ts
export default function helloWorld() {
  console.log("Hello, world!");
}

This is then imported via:

import hello from "./hello.js";
hello();

除了默认导出以外，您还能够经过省略默认导出来导出多个变量和函数：

// @filename: maths.ts
export var pi = 3.14;
export let squareTwo = 1.41;
export const phi = 1.61;

export class RandomNumberGenerator {}

export function absolute(num: number) {
  if (num < 0) return num * -1;
  return num;
}

在另外一个文件里用大括号导入：

import { pi, phi, absolute } from "./maths.js";

console.log(pi);
const absPhi = absolute(phi);

还能够用 import alias 语法：

import { pi as π } from "./maths.js";

console.log(π);

您能够将全部导出的对象放入一个使用 * 做为名称的命名空间中：

// @filename: app.ts
import * as math from "./maths.js";

console.log(math.pi);
const positivePhi = math.absolute(math.phi);

直接 import 一个文件会有什么后果？

// @filename: app.ts
import "./maths.js";

console.log("3.14");

在这种状况下，导入什么都不作。 可是，对 maths.ts 中的全部代码都进行了评估，这可能会触发影响其余对象的反作用。

TypeScript 加强了 import 语法，能够只 import module 里的 type 定义。

// @filename: animal.ts
export type Cat = { breed: string; yearOfBirth: number };
'createCatName' cannot be used as a value because it was imported using 'import type'.
export type Dog = { breeds: string[]; yearOfBirth: number };
export const createCatName = () => "fluffy";

// @filename: valid.ts
import type { Cat, Dog } from "./animal.js";
export type Animals = Cat | Dog;

// @filename: app.ts
import type { createCatName } from "./animal.js";
const name = createCatName();

TypeScript’s Module Resolution Options

模块解析是从 import 或 require 语句中获取字符串并肯定该字符串引用哪一个文件的过程。

TypeScript 包括两种解析策略：Classic 和 Node。 经典，当编译器标志模块不是 commonjs 时的默认值，包含在内是为了向后兼容。 Node 策略复制了 Node.js 在 CommonJS 模式下的工做方式，并额外检查了 .ts 和 .d.ts。

有许多 TSConfig 标志会影响 TypeScript 中的模块策略：moduleResolution、baseUrl、paths、rootDirs。

有关这些策略如何工做的完整详细信息，您能够查阅模块解决方案。

TypeScript’s Module Output Options

有两个选项会影响发出的 JavaScript 输出：

• target 肯定哪些 JS 功能被降级（转换为在较旧的 JavaScript 运行时中运行）以及哪些保持不变
• module：肯定模块之间使用哪些代码进行交互的模块

您使用的目标取决于您但愿在其中运行 TypeScript 代码的 JavaScript 运行时中可用的功能。这多是：您支持的最旧的 Web 浏览器，您但愿运行或可能来自的最低版本的 Node.js 来自您的运行时的独特约束——例如 Electron。

模块之间的全部通讯都经过模块加载器进行，编译器标志模块肯定使用哪个。在运行时，模块加载器负责在执行以前定位并执行模块的全部依赖项。

例如，这是一个使用 ES 模块语法的 TypeScript 文件，展现了模块的几个不一样选项。

下面是 TypeScript 原始文件：

import { valueOfPi } from "./constants.js";

export const twoPi = valueOfPi * 2;

下面是 ES2020 output：

import { valueOfPi } from "./constants.js";
export const twoPi = valueOfPi * 2;

下面是 CommonJS：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.twoPi = void 0;
const constants_js_1 = require("./constants.js");
exports.twoPi = constants_js_1.valueOfPi * 2;

下面是 UMD：

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "./constants.js"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.twoPi = void 0;
    const constants_js_1 = require("./constants.js");
    exports.twoPi = constants_js_1.valueOfPi * 2;
});