TypeScript（十二）模块

目录

引言

d.ts声明文件

declare关键字

全局声明

全局声明方式

全局声明一般用作

函数声明

在.ts中使用declare

外部模块（文件模块）

模块关键字module

声明模块

模块声明方式

模块通配符

模块导出

模块嵌套

模块的作用域

模块别名

内部模块（命名空间）

命名空间 OR 模块？

global关键字

总结

参考文章

---

引言

本文收录于TypeScript知识总结系列文章，欢迎指正！ 

将体量大的程序拆分成多个小的，功能独立的模块是开发中不可或缺的一环，开发复杂程序的核心之一就是让其变得不复杂。模块化开发可以提高代码的可维护性、可重用性、可扩展性和可测试性，从而提高了开发效率和代码质量，TypeScript沿用了JS的模块概念，在之前文章中我介绍过Node环境下的两种类型兼容，顺带提了一下目前常用的模块导入导出方式：Commonjs和ES Module，这两种方式在TS中被称为是外部模块，除此之外TS还包含了内部模块和全局模块，本文将逐一介绍

d.ts声明文件

在编译后的JS文件的同一级常能看到.d.ts后缀的声明文件，其作用是描述代码中已经存在的类型信息或为其提供类型声明。举个例子，使用第三方库时可能会找不到对应的类型信息，于是TS提供了声明文件这个概念，它使开发者拥有对库进行描述的能力，达到静态类型提示或者TS检查的目的，声明文件编译后不会生成任何js代码。

一般声明文件内部是不包含可执行语句的，只有类型或者变量的声明。在开发时通常会在项目根目录中新建一个像global.d.ts（名字自取）的文件用于描述全局的类型，变量，函数，类等等

declare关键字

declare是描述TS文件之外信息的一种机制，它的作用是告诉TS某个类型或变量已经存在，我们可以使用它声明全局变量、函数、类、接口、类型别名、类的属性或方法以及后面会介绍的模块与命名空间

全局声明

通常在global.d.ts文件中使用declare关键字进行全局声明，以便目录下所有文件都能直接访问

全局声明方式

• declare var 名称： 变量
• declare const / let 名称： ES6变量
• declare function 名称： 方法
• declare class 名称： 类
• declare enum 名称： 枚举
• declare module 名称： 模块
• declare namespace 名称： 命名空间
• declare interface 名称： 接口
• declare type 名称： 类型别名

全局声明一般用作

• 描述全局变量或类型
• 描述第三方库的类型
• 描述全局模块

举个例子，在项目根目录新建global.d.ts用于变量类型的全局声明，接着修改tsconfig中配置include为["global.d.ts", "src"]，在项目任意目录新建index.ts

// global.d.ts
declare interface IAnimal {
    name: string
    age?: number
}

declare let animal: IAnimal
// src/index.ts
animal = {
    name: "阿黄"
}

可以看到index.ts文件中animal的类型是global.d.ts中声明的变量，其二者产生了关联

 

tips：声明文件（d.ts）中的所有类型（类型别名和接口除外）及变量都要使用declare定义，或者使用export将其导出，否则会抛出以下错误：.d.ts 文件中的顶级声明必须以 "declare" 或 "export" 修饰符开头。

此外，使用类型别名和接口定义的类型可以不需要声明，直接在全局访问

declare type str = string
// 相当于type str = string

函数声明

参照上面的定义方式，我们可以在声明文件中声明一个函数，然后再使用前对函数进行实现或重载

// global.d.ts
declare function add(a: number, b: number): number;

// src/index.ts
function add(a: number, b: number) {
    return a + b
}
console.log(add(1, 2));// 3

// src/main.ts
function add(a: number, b: number, c: string) {
    return a + b + c
}
console.log(add(1, 2, "3"));// 33

对函数声明进行重载