React导入一个带有声明的命名空间的模块

Question

我想弄清楚如何在我的React应用程序中使用一些现有的功能。

有一个名为Foo.js的javascript文件和相关的类型foo . d.s s

Foo.js有很多函数，在顶部我看到

//I don't understand what the below lines re doing
var A = A || {};
A.B= A.B|| {};
A.B.C= A.B.C|| {};
A.B.C.Foo= A.B.C.Foo|| {};
(function ()
//here there are many functions
)();

然后在d.ts文件

declare namespace A.B.C.Foo
{
//here there are exported functions
}

现在我的react组件在另一个文件夹中，我希望使用Foo.js文件中定义的函数。我如何使用它们?我已经尝试将以下内容添加到我的组件

///<reference path="../../../typings/@Test/Foo.d.ts" />

我的组件如下图

const Component: React.FunctionComponent<IProps> = (props:Iprops) =>
{
//I'm trying to use the function here.
}

导入函数需要做些什么?我不知道该怎么做。

编辑:还有一条信息:在html文件中，我在脚本标签

中添加了对Foo.js的引用/>编辑:所以我能够让这个工作。接受的答案为我指明了使用global的正确方向。看起来Foo.js已经以一种可以在React中使用的方式声明过了。在反应端，添加下面的引用路径是有效的。要进行类型检查，我缺少的是d。ts文件导出一个命名空间，所以我必须在所有函数前加上该命名空间，如下所示:///

Answer 1

向应用程序的其他模块公开函数的最佳方式是当模块提供export语句时:

// Foo.js
export const mySpecialFunction = () => {}
// otherFile.js
import { mySpecialFunction } from './Foo.js';
mySpecialFunction();

否则，您将需要依赖window(考虑到您的代码在浏览器上运行)通过在某处导入Foo.js(最好在您的应用程序的入口点)并使用函数来全局暴露您的功能:

// Foo.js
window.mySpecialFunction = () => {}
// index.js (entrypoint of your app)
import './Foo.js';
// otherFile.js
mySpecialFunction();

但是对于Typescript，你不能仅仅定义一个命名空间。它必须与您在tsconfig.js上定义的指向Foo.js的路径别名相匹配。

事实是你的目标并不明确。

编辑:

我如何做这个"typescript作为一个全局模块附加到窗口"?

您可以遵循此文档https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-d-ts.html。它将帮助您定义全局函数或名称空间。
免责声明:一般来说，不要依赖全局模块，因为它们会降低代码的可读性。

Answer 2

通常情况下，对于一个格式良好的带有导出函数的库，您应该添加:

import FooFunctions from "A.B.C.Foo"

，然后用FooFunction.{theFunctionYouWantToCall}()调用这些函数。您也可以使用这种格式的import:

import {theMatchingFunctionYouWantToCall} from "A.B.C.Foo"

注意:如果你从npm导入了这个库，并且它在你的node_modules中，这是正常的情况。如果您创建了这个库或创建了丢失的。d。确保Typescript找到了你的。d. ts文件。ts。