在 Typescript 项目中定义使用第三方库类型的全局变量

前言

如果想要在 typescript 项目中定义一个全局变量,通常的做法都是在项目根目录新建一个 types 文件夹,里面写一个 index.d.ts 文件,内容如下:

types/index.d.ts
1
2
// 如定义一个名为 global_variable 类型为 any 的全局变量
declare const global_variable:any;

然后在 tsconfig.json 增加 "types" 字段,这样在其他ts文件里面就可以直接使用 global_variable 变量,而不需要 import 。

问题

但是最近碰到个需求需要定义一个使用第三方库类型的全局变量,刚开始我是这样写的:

types/index.d.ts
1
2
3
4
import { Interface } from 'third-party-lib';

declare const variable:Interface;
declare const global_variable:any;

然鹅,这样不仅不能用,还导致了 Cannot find name "global_variable" 的错误,也就是在使用 global_variable 的地方,我还需要 import 它。

原因

找了许久才找到原因,因为 import 语句使得这个 types/index.d.ts 从全局模块变成了一个普通模块,需要 import 才可以使用。所以我们在定义全局模块的时候需要避免 import ... from '...' 这种写法,不然你就会被突如其来的一大堆报错而吓到。
那这样我们可不可以定义一个使用 import 进来的类型的全局变量呢?答案是肯定的。
typescript 2.9 为我们提供了 import() 语法,这样我们就可以在类型文件中愉快地定义带有复杂类型的全局变量了。

types/index.d.ts
1
2
declare const variable:import('third-party-lib').Interface;
declare const global_variable:any;

import 的可以是自己项目中写的类型,也可以是第三方库的类型定义。

参考链接