前端 - typescript中如何定义全局变量？

Question

我用global.d.ts定义全局变量：

// global.d.ts
declare const AAA: "aaa"


// main.ts
console.log(AAA)    // 编译器不报错

但是在执行main.ts的时候

npx ts-node main.ts

报错：

...
nodede_modules/ts-node/src/index.ts:859
    return new TSError(diagnosticText, diagnosticCodes, diagnostics);
           ^
TSError: ⨯ Unable to compile TypeScript:
main.ts:1:13 - error TS2304: Cannot find name 'AAA'.

1 console.log(AAA)
              ~~~

Answer 1

TypeScript 允许声明全局变量，用题主的方法可以，也可以用在 .d.ts 文件中声明

declare global {
    const AAA: string;
}

然后直接可用。

不过声明是声明，这是给 TS 用的，实现仍然是 JS 实现。光有声明不代表一定有对应的 JS 的实现。如果是引入的第三方库，实现应该是会直接挂在 globalThis 或者 window/global 这样的全局对象上的。如果是自己其他地方挂上去的也可以。

注意：JS 里全局变更可以直接访问，也可以通过 globalThis. 来访问，但是在 TS 里，声明的全局可以直接访问，但不能 globalThis. 来访问，除非在 globalThis 类型中声明它。

问题在于，自己写 TS 程序的时候，只要声明了，就可以使用全局变量，包含赋值（声明为 let 或者 var 时）。但是不管你写在哪个 .ts 文件中，这个文件都需要要在其他地方引用（调用）才会执行 —— 既然如此，何必非要写全局，直接写模块变量导出不好么，还更好控制。

对于这个问题，更常见的情况是在 TS 中声明，通过构建环境（比如 Webpack、Vite 等）注入。比如版本信息，就可以直接使用 package.json 中的版本号。以 Vue(Vite) 为例：

// vite.config.js
import { version } from "./package.json"
/...
export default {
    define: {
        __APP_VERSION: JSON.stringify(version)
    }
}

记得在 TypeScript 类型文件中添加声明，以及在 eslint 配置中加 __APP_VERSION 全局变量声明

Answer 2

不可能的，正如楼上所说，没有这功能，不过你可以往globalThis里面加属性，也能访问到

Answer 3

TypeScript不鼓励写全局变量，鼓励用模块系统。因此TS没有，也不会有方便的写global的方式。

https://juejin.cn/post/7026629072004317192
https://juejin.cn/post/6898710177969602574