Question

我正在尝试在Typescript中使用globalThis，并且希望获得有关如何更好地编写它的一些建议。
当前的实现是这样的：

创建文件 types / global.d.ts 并添加到内部

interface Global {
   foo: string
}

declare let foo: Global["foo"];

在 tsconfig.json 中添加

"files": [
  "types/global.d.ts"
]

然后为了设置foo的值，使用

(globalThis as any).foo = "The value of foo"

我不喜欢这种方法，首先是需要样板（但是我认为这是不可避免的），其次是(globalThis as any).foo =表达式

Answer 1

TypeScript 3.4引入了对ECMAScript新的globalThis进行类型检查的支持。

var x = 1
const y = 2
let z = 3
globalThis.x // ok
globalThis.y // should error, no property 'y'
globalThis.z // should error, no property 'z'
globalThis['x'] // ok
globalThis['y'] // should error, no property 'y'
globalThis['z'] // should error, no property 'z'
globalThis.Float64Array // ok
globalThis.Infinity // ok

declare let test1: (typeof globalThis)['x'] // ok
declare let test2: (typeof globalThis)['y'] // error
declare let test3: (typeof globalThis)['z'] // error
declare let themAll: keyof typeof globalThis

您可以在the documentation.

中对其进行更多准备。

Answer 2

您可以在打字稿中使用declaration merging来实现这一目标。

在您的global.d.ts文件中：

export declare global {
  interface Window {
    // add you custom properties and methods
    foo: string
  }
}

现在，您可以使用Window.foo，而不会出现打字稿警告您了。

我在dev.to

上写了一个迷你博客

Answer 3

使用其他答案的组合，这就是对我有用的。

在TS文件（或全局类型文件）的顶部：

declare module globalThis {
    let myObj: { foo: string };
}

globalThis.myObj = { foo: 'bar' };

Answer 4

我的回答基于 Edward Casanova 的回答。我正要编辑它，但对我有用的代码仍然有很多差异，另外我现在可以提供一些关于此的附加信息。

这是基于 TypeScript 4.3.5

// typings/globals.d.ts (depending on your tsconfig.json)

interface Person {
  name: string
}

export declare global {
  var someString: string
  var globalPerson: Person
}

如果没有至少一个 export（或 import）关键字，这将不起作用。这会将这个文件变成一个 ES 模块，这是它以这种方式工作所必需的。如果您可以导出其他内容，则无需 export declare global：

export interface Person { /* ... */ }

declare global { /* ... */ }

上面的代码为以下句柄添加了类型：

someString
window.someString
globalThis.someString

globalPerson.name
window.globalPerson.name
globalThis.globalPerson.name

另一方面，以下是可能的，但结果不同：

export declare global {
  let someLetString: string
  const someConstString: string
}

这只会为以下句柄添加类型：

someLetString
someConstString

正如预期的那样，您不能为 someConstString 分配任何值。这对于将功能添加到全局范围而不是导出它的一些较旧的 JS 库可能很有用。在这种情况下，库仍然可以为 const 赋值，因为它只是一种类型，而不是真正的 const。这个 const 只有 TypeScript 代码知道。但请注意，let 和 const 不会向全局对象 window 和 globalThis 添加属性。因此，var 在这里可能是更好的选择。

Answer 5

我终于得到了以下解决方案在 global.d.ts

中

interface Window {
  foo: string
}

declare let foo: Window["foo"];

并将其用于另一个文件

window.foo =“ foo的值”

Answer 6

找到方法了。也许是一个不错的解决方法

在项目根目录下的“global.d.ts”文件中，写入以下内容

declare global {    
    var [propertyYouWantToAdd]: any; or typeof "anything you want. Perhaps import a class from a module";

//Make sure you use var instead of let or const, as it attaches to the global object.     
}

这是文档中的 reference

Answer 7

但如果你找到替代

window.foo = 'value of foo'

那么一个简单的解决方案就是

在打字稿中

<块引用>

other_var_name 是持有 other_var_value 或对象的 var 或功能

const foo = 'value of foo';
(global as any).foo;

为我工作

在Typescript中使用globalThis

7 个答案: