前言

今天我们来聊聊TS的模块化

简介

TS的模块化沿用了JS模块的概念，模块是在自身的作用域中执行，在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你明确地使用export形式之一导出它们

如果要使用所导出的东西，那对应使用import的形式。所以模块之间的关系是通过在文件级别上使用import和export建立的

那下面主要讲讲import和export：导出和导入，看他们都有哪些基本的形式

我们可以使用export关键字导出声明，也可以导出语句

首先，任何声明都能使用export导出，包括变量，函数，类，类型别名或接口等

例如：

export interface StringValidator {
    isAcceptable(s: string): boolean;
}

导出语句也很便利，并且可以对导出的部分重命名

例如：

class ZipCodeValidator implements StringValidator {xxx}
export { ZipCodeValidator as mainValidator };

模块的导入和导出都差不多，只是导入使用import形式导入内容，不同的导入形式导入的东西会不一样

比如我们可以导入一个模块中的某个导出内容

import { ZipCodeValidator } from "./ZipCodeValidator"

上述代码中，从ZipCodeValidator模块中导入了ZipCodeValidator，接着就可以使用ZipCodeValidator了

跟导出一样，可以使用as重命名

import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";

上面代码重命名后，就用重新命名的zcv了

也可以将整个模块导入到一个变量，如下代码：

import * as validator from "./ZipCodeValidator";

默认导出使用 default关键字标记，并且一个模块只能有一个default导出

export default $;

导入的话，需要使用一种特殊的形式来导入

import $ from "xxx";

类和函数声明可以直接被标记为默认导出

export default class Xxx {...}

而且标记为默认导出的类和函数的名字是可以省略的

除此之外，你也单独导出一个原始值

export default "abc";

更多相关使用可参考官方文档！

以上就是本文的所有内容，如有问题，欢迎指正~