模块化

#tag

模块化的笔记

最先开始的模块化-namespace

namespace Guang {  
    export interface Person {  
        name: string;  
        age?: number;  
    }  
  
    const name = 'guang';  
    const age = 20;  
  
    export const guang: Person = {  
        name,  
        age  
    }  
    export function add(a: number, b: number):number {  
        return a + b;  
    }  
}

原理：就是全局上放一个对象，然后对象上再挂几个暴露出去的属性。

module

declare module xxx {
	export ...
	import ...
	export const a = 1
	import {xxx} from 'xxx'
}

这个 module 和 namespace 有什么区别呢？

其实真没什么区别，只不过 module 后一般接一个路径，而 namespace 后一半是一个命名空间名字。其他的语法都一样的。

es module

从ECMAScript 2015开始，JavaScript引入了_“模块”_的概念，TypeScript也沿用这个概念。模块是自声明的，一个文件即是一个模块，两个模块之间的关系是通过在文件级别上使用imports和exports建立的。

模块在其自身的作用域里执行，而不是在全局作用域里，这意味着定义在一个模块里的变量、函数、类等等在模块外部是不可见的，除非你明确地使用export形式之一导出它们。相反，如果想使用其它模块导出的变量、函数、类、接口等，你必须要导入它们，可以使用`import形式之一。

模块使用模块加载器去导入其它的模块。在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。大家最熟知的JavaScript模块加载器是服务于Node.js的CommonJS和服务于Web应用的Require.js。

TypeScript与ECMAScript 2015一样，任何包含顶级import或者export的文件都被当成一个模块。

Ts导出

导出声明

导出语句

重新导出

export const num = 1
export interface Xxx {}
export default function(){}

Ts导入

import { num, Xxx } from '...'

总结

• namespace：最早的实现模块的方式，编译为声明对象和设置对象的属性的 JS 代码，很容易理解
• module：和 namespace 的 AST 没有任何区别，只不过一般用来声明 CommonJS 的模块，在 @types/node 下有很多
• es module：es 标准的模块语法，ts 额外扩展了 import type

dts 的类型声明默认是全局的，除非有 es module 的 import、export 的声明，这时候就要手动 declare global 了。为了避免这种情况，可以用 reference 的编译器指令。
reference替代import、export的方式