12 - TS的模块x

TS的模块

在 TypeScript 中，模块是一个包含代码和数据的可重用程序片段。模块的主要目标是提供模块作用域和组织代码。模块在其自己的作用域中执行，而不是在全局作用域中。这意味着在模块中定义的变量、函数、类等在模块外部是不可见的，除非你明确地使用 export 形式之一导出它们。相反，如果要在模块中使用变量、函数、类、接口等的导出版本，则必须导入它们，使用 import 形式之一。

什么是模块？

模块是一个程序包，包内的成员（函数、变量、类型）仅仅在包内可见，包外想要方位这些成员除非模块自己主动声明向包外提供。例如用import/export 语法。

Export

在 TypeScript 和 ES6 中，export 语句用于从模块中导出函数、对象或原始值，使它们可以在其他程序中通过 import 语句获取。

default Export

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

外部引用方式如下：

import hello from './hello.ts'
hello()

non-default export

// @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, phi);
console.log(absolute(phi))

别名

为了防止模块冲突，可以使用别名。

import { pi as π } from "./maths.js";
 
console.log(π);

Export类型

// @filename: animal.ts
export type Cat = { breed: string; yearOfBirth: number }
export interface Dog {}

可以使用 import 或 import type 来导入：

import {Cat} from './animal.ts'
import type {Cat} from './animal.ts'

使用 import type 明确表示您只需要类型信息，而不是实际的值。

例如：

import type {Foo} from './animal'
const foo = new Foo() // 这会报错，因为 Foo 是一个类型，不能被实例化。

TS的模块解析配置项

在 TypeScript 的配置文件 tsconfig.json 中，有关于模块解析的配置项。其中 module 可以用来配置 TypeScript 将模块编译成什么样的 JavaScript 代码，例如 CommonJS 或 ES6。另外，moduleResolution 选项决定了模块的加载算法是 node 还是 classic。

可选项包括：
- ES6
- ES2015
- ES2020
- UMD
- AMD
- Commonjs
- SYSTEM
- ESNext

Namespace

在 TypeScript 早期，命名空间被用作模块的一种形式。但随着 ES6 模块的引入和普及，命名空间逐渐被淘汰，现在更推荐使用模块。