Umd 的包如何导出 TS 类型

2023-02-28

类型 esm umd

在TypeScript里声明模块，最早是用namespace和module的语法，后来支持了esmodule，类型和变量会用import来导入、用export导出。比如你写了一个库，导出的变量叫Guang，它下面有name和age两个属性，所以你是这样声明类型的：复制exportdefaultGua

在 TypeScript 里声明模块，最早是用 namespace 和 module 的语法，后来支持了 es module，类型和变量会用 import 来导入、用 export 导出。

比如你写了一个库，导出的变量叫 Guang，它下面有 name 和 age 两个属性，所以你是这样声明类型的：

export default Guang;

declare namespace Guang {
    export const name = 'guang';
    export const age = '20';
}1.
2.
3.
4.
5.
6.

使用的时候用 import 来导入：

import Guang from 'xxx';

console.log(Guang.name, Guang.age);1.
2.
3.

这样是没啥问题。

但如果这个库除了支持 es module 的方式使用，还支持 umd 呢？

UMD 规范想必大家很熟悉了，就是判断是 CMD、AMD 还是全局变量的方式，然后用合适的模块规范导出模块的值：

但这里面不包含 es module，因为它不是 api 而是语法。

那如果你构建出了 umd 规范的代码，使用者用 script 的方式给引入了：

这样还能做类型提示和检查么？

不能了，因为你导出是用的 esm 的 export，只有 import 引入才会有类型提示和对应的检查。

那怎么办呢？

用 declare global 声明为全局类型？

declare global {
    namespace Guang {
        export const name = 'guang';
        export const age = '20';
    }
}1.
2.
3.
4.
5.
6.

这样是能解决问题，但这样在 esm 模块里也不用 import 就可以直接用了，而我们想在 esm 里用 import，其他情况才用全局类型。

有啥方式能约束在 esm 里只能 import 用，但是其他地方可以做为全局类型呢？

TypeScript 专门为这种情况设计个了语法，叫 export as namespace xxx；

比如上面的代码可以这样写：

export = Guang;
export as namespace Guang;

declare namespace Guang {
    export const name = 'guang';
    export const age = '20';
}1.
2.
3.
4.
5.
6.
7.