我要评论
目录
引言
本文收录于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对函数声明进行重载
在.ts中使用declare
我们在介绍的时候曾用到了declare关键字，当时并没有具体说明使用它的原因，这里咱们详细分析一下，首先贴出一段类似的代码
class animal {
name?: string;
}在es2022及以后类中定义的属性会在编译后保留在类中，就像
class animal {
name;
}而在.ts文件中使用declare只会被当成是类型或者变量的定义，最后编译在声明文件.d.ts中，不会编译在.js文件中，就像下面这个类
// index.ts
declare class animal {
name?: string;
}
// index.js
// 空文件
// index.d.ts
declare class animal {
name?: string;
}通过declare这个特点，我们可以在类中属性或者方法定义时使用declare关键字将其指定为声明类型的变量，不会出现在.js中，有效的解决之前的问题
// index.ts
class animal {
declare name?: string;
}
// index.js
class animal {}外部模块（文件模块）
在ts中模块既可以以单个文件的形式存在，这与js相同，通过export和import两个关键字进行导出导入，对应的介绍可以参照这篇文章的esm部分，也可以使用module关键字定义模块。
与js稍有不同，ts中包含了接口和类型别名，我们同样可以通过export type 类型名 导出对应类型别名，如
// src/main.ts
export type ianimal = {
name: string
color?: string
}
// src/index.ts
import { ianimal } from './main'
const animal: ianimal = {
name: "阿黄",
};tips：在一个.d.ts文件中使用export关键字会使这个文件成为一个模块（这点很重要，一个声明文件（d.ts）不是全局声明文件（只使用declare声明类型）就得是文件模块（使用export等关键字导出）），比如我们把上面的global文件和index改成下面代码
// global.d.ts
type ianimal = {
name: string
color?: string
}
export {}
// index.ts
const animal: ianimal = {
name: "阿黄",
};此时直接使用全局的ianimal就会抛错
必须使用export将ianimal导出并使用import导入该模块中的类型
模块关键字module
声明模块
除了上面的使用方式外，我们可以使用module关键字在一个文件中定义多个模块，如
// global.d.ts
declare module 'global_type' {
export type ianimal = {
name: string
}
export type icat = {
name: string
}
}
declare module 'global_type1' {
export type idog = {
name: string
}
}
// index.ts
import type { ianimal, icat } from "global_type"
import type { idog } from 'global_type1'
const animal: ianimal = {
name: "阿黄",
};
const dog: idog = animal
const cat: icat = animal每一个使用module定义的内容是一个模块
模块声明方式
ts支持commonjs和esm两种模块系统，使得声明模块有两种写法，分别是使用字符串和变量名
commonjs的写法遵循匹配文件的相对或绝对路径，通常模块名作为字符串字面量，该方法不支持导出模块，只允许使用declare定义全局模块，并且使用时需要使用import导入
// global.d.ts
declare module "global_type" {
export type ianimal = {
name: string
}
}
// src/index.ts
import * as global_type from "global_type"
const myobject: global_type.ianimal = {}esm的写法和定义变量一样，使用变量名匹配标识符进行模块的导入，这种方式与定义命名空间（namespace）的效果一样，使用esm定义的全局模块可以直接使用，不需要导入
// global.d.ts
declare module global_type {
export type ianimal = {
name?: string
}
}
// src/index.ts
const myobject: global_type.ianimal = {}模块通配符
我们在webpack或者vite等工具中可能会看到类似下面的代码，这种写法是commonjs模块系统独有的
declare module '*.type' {
export type idog = {
name: string
}
}这段代码中使用了*.type通配符，匹配了所有.type结尾的模块，导入.type类型的文件就会有idog这个类型
import type { idog } from 'global_type.type'
const animal: idog = {
name: "阿黄",
};
const dog: idog = animal模块导出
使用module定义的模块遵循全局声明，同样可以使用export导出并在其他文件使用，这种方式是esm模块系统独有的
// global.d.ts
export module global_type {
export type ianimal = {
name: string
}
export class animal implements ianimal {
name: string
}
}
// index.ts
import { global_type } from '../global'
const myobject: global_type.ianimal = new global_type.animal();模块嵌套
模块嵌套可以应对更复杂的结构，避免命名冲突，全局污染，在模块中写模块不需要declare和export关键字，模块默认自带导出
// global.d.ts
declare module global_type {
export module ianimalmodule {
export let animal: ianimal
export type ianimal = {
name: string
}
}
module idogmodule {
let dog: idog
type idog = {
name?: string
}
}
}
// src/index.ts
let animal: global_type.ianimalmodule.ianimal = global_type.ianimalmodule.animal
let dog: global_type.idogmodule.idog = global_type.idogmodule.dog模块的作用域
在模块嵌套时，我们可以把 module { } 或者 namespace { } 的大括号中的作用域称为模块的作用域，作用域中的模块类型可以访问，此时如果在模块中使用 export {} 导出空对象的话，当前模块就会被视为文件模块（这和我们上面说到的全局文件转模块文件的tips类似），需要使用export导出局部类型、变量、模块，否则会默认不做导出操作，成为一个私有的模块：
// global.d.ts
declare module global_type {
module ianimalmodule { // 局部模块，只能在global_type中使用
let animal: ianimal
type ianimal = {
name?: string
}
}
export { }
}
// src/index.ts
let animal: global_type.ianimalmodule.ianimal// “global_type”没有已导出的成员“ianimalmodule”此时需要将模块中的模块手动导出，或加入到导出对象中
export module ianimalmodule {
let animal: ianimal
type ianimal = {
name?: string
}
}
// 或者
export { ianimalmodule }模块别名
模块的别名是一种用来简化其访问的方式，可以使用import关键字来定义一个别名，然后用这个别名来代替原来的名称，比如
// global.d.ts
declare module global_type {
export type ianimal = {
name?: string
}
export class animal implements ianimal { }
}
// src/index.ts
import ani = global_type.animal
import iani = global_type.ianimal
const ami: iani = new ani()内部模块（命名空间）
因为1.5版本前的命名空间（namespace）是ts提出的模块理念，而上面说到的模块是js中的es标准，typescript对二者做了区分，所以它被称为内部模块。它同样是模块化机制的一员，它的作用是将全局的变量，函数，类等等封装在一个空间内，防止命名污染，冲突。官方比较推荐使用namespace来代替module的esm模块系统写法，所以在使用模块的变量写法时，ts会将其转换成namespace
还记得上面说的esm模块系统的导出方式吗？我们把代码中的module关键字换成namespace，就大功告成了，命名空间拥有模块的变量写法的特性。
namespace global_type {
export type ianimal = {
name: string
}
export class animal implements ianimal {
name: string
}
}
const myobject: global_type.ianimal = new global_type.animal();我们把代码放到一个文件中解析一下编译后的js文件
var global_type;
(function (global_type) {
class animal {
name;
}
global_type.animal = animal;
})(global_type || (global_type = {}));
const myobject = new global_type.animal();可以看到，代码中使用iife产生了一个私有的作用域并且定义了一个空对象，将命名空间导出的变量放至对象中。
思考一个问题，一个命名空间必须通过一处代码块定义吗？
答案是否定的，类似函数重载，命名空间的定义允许声明合并，将同名的命名空间对象进行合并（后面的文章会说到，留个悬念）
命名空间 or 模块？
模块适用于需要动态加载、封装和复用代码的场景，比如node.js应用、web应用、npm包等。模块可以利用模块加载器（如commonjs/require.js）或支持es模块的运行时来管理依赖和导入导出。模块是es6标准的一部分，是现代代码的推荐组织方式。
命名空间适用于需要在全局范围内定义变量、函数、类、接口等的场景，比如web应用中使用<script>标签引入所有依赖的html页面。命名空间可以避免全局变量的命名冲突，但也会增加组件依赖的难度，尤其是在大型应用中。
global关键字
在ts中declare global关键字用于向全局作用域中添加类型或变量的声明
以我的理解，global的使用方式应该和module以及namespace类似，照葫芦画瓢，使用global { ... }作为一个代码块表示全局的作用域，在里面定义的类型以及变量应该是能够在任意地方取到的
// global.d.ts
declare global {
type idog = {
name: string
}
let animal: idog
}
// src/index.ts
animal = {
name: "阿黄"
}然而事情并没有这么简单，它会提示：全局范围的扩大仅可直接嵌套在外部模块中或环境模块声明中。
在官方给出的d.ts模板中，代码最后一行做了一个导出的操作
这是为何？
实际上这是为了解决ts编译器的一个问题，上面我们说到，如果声明文件d.ts没有使用export导出或者没有使用declare定义类型、变量，那么编译器就会报错，而使用declare global和使用declare module、declare namespace、declare type、declare interface都不一样，这些类型或者模块的定义就是导出声明，不需要进行额外的export。所以在定义（说是拓展比较贴切）全局的global时会在代码底部导出空对象，来声明这个文件是有导出的
上面我们提到：使用export关键字会使声明文件成为一个模块；如果使用了declare global和export { }，那么我们的全局变量和类型就不需要使用declare声明，可以直接写在declare global代码块中
下面是一个完整的示例
// global.d.ts
declare global {
type idog = {
name: string
}
let animal: idog
}
export { }
// src/index.ts
animal = {
name: "阿黄"
}总结
文章写到这里也就结束了，本文简述了ts中模块的使用，针对声明文件，declare关键字，文件模块，命名空间以及全局global关键字这几个方面进行了介绍，同时提出了自己的看法及遇到的问题，希望能对你有帮助。
感谢你看到最后，如果觉得文章还不错的话，还请点赞收藏关注支持一下博主，对文章内容有任何问题还望在评论区留言或私信，感谢！
参考文章
typescript: documentation - global .d.ts
发表评论