将Typescript全局变量声明为“模块”类型

I have the React type definition file (that is declared using an external module). In my source files, I usually do:

我有React类型定义文件(使用外部模块声明)。在我的源文件中,我通常会这样做:

import * as R from "react"

and can then happily use R.createElement(... etc in a strongly typed fashion.

然后可以愉快地使用R.createElement(...等强类型方式。

What I want is to not have to import R in every file, and instead have it as a global declaration (yes, I'm willing to polute the global namespace with a few variables). I've tried:

我想要的是不必在每个文件中导入R,而是将其作为全局声明(是的,我愿意用一些变量来规划全局命名空间)。我试过了:

import * as React from "react";
declare var R : React;

This doesn't work though, I get "Cannot find name 'React'". Is there another way to export the entire module as global?

这不起作用,我得到“找不到名字'React'”。有没有其他方法可以将整个模块导出为全局模块?

---

Edit 1 - I should have made clearer: I'm interested in how to export a global type definition in a .d.ts file. So assume I've attached R to window already. Now I need typescript to know that R is of type React module.

编辑1 - 我应该更清楚:我对如何在.d.ts文件中导出全局类型定义感兴趣。所以假设我已经将R附加到窗口。现在我需要打字稿来知道R是React模块的类型。

3 个解决方案

#1

instead have it as a global

而是把它作为一个全球性的

There are two sides to this: global type declaration for typescript and global variable availability for JavaScript consumption.

这有两个方面:打字稿的全局类型声明和JavaScript使用的全局变量可用性。

Global Type Declaration

A .d.ts or a declaration only contributes to the global name declaration space if there is no root level import or export in the file. So have a file globalreact.d.ts which will be an edited version of https://github.com/borisyankov/DefinitelyTyped/blob/master/react/react.d.ts of the form declare module R (instead of declare module "react").

如果文件中没有根级别导入或导出,则.d.ts或声明仅对全局名称声明空间有贡献。所以有一个文件globalreact.d.ts,它将是声明模块R形式的https://github.com/borisyankov/DefinitelyTyped/blob/master/react/react.d.ts的编辑版本(而不是声明模块) “反应”)。

Global Variable Export

You need to put it on window in case of the browser. So do the following in a file makeReactGlobal.ts:

如果是浏览器,你需要把它放在窗口上。所以在文件makeReactGlobal.ts中执行以下操作:

var R = require('react'); 
(<any>window).R = R

And then in your application main have this file a dependency to ensure that it executes before any of your other code.

然后在您的应用程序中,main将此文件设置为依赖项,以确保它在您的任何其他代码之前执行。

#2

The declare keyword does not declare a variable in the global scope. This keyword is used for cases in which there will be a variable in the global scope and you want to use it in a TypeScript without getting compilation errors.

declare关键字未在全局范围中声明变量。此关键字用于在全局范围中存在变量并且您希望在TypeScript中使用它而不会出现编译错误的情况。

You can declare a global variable with:

您可以使用以下命令声明全局变量:

import * as R from "react";
window.R = R;

#3

Like @basarat said, it doesn't look like it's possible. @ahejlsberg himself weighed in on the issue on github: https://github.com/Microsoft/TypeScript/issues/3180#issuecomment-102523512.

就像@basarat说的那样,它看起来不太可能。 @ahejlsberg自己在github上讨论了这个问题:https://github.com/Microsoft/TypeScript/issues/3180#issuecomment-102523512。