单个 JavaScript 文件的 TypeScript 定义

Posted 2023-02-19

【中文标题】单个 JavaScript 文件的 TypeScript 定义

【英文标题】：TypeScript definition for single JavaScript file

【发布时间】：2017-04-14 15:36:31

【问题描述】：

我正在尝试在 Movilizer html5 视图中运行 Ionic2 应用程序。为了在 Movilizer 容器客户端和 Ionic2 应用程序之间发送数据，我需要包含一个 plugins/Movilizer.js 文件。据我了解，Movilizer 系统随后将用包含实际实现的文件替换该文件。文件内容如下：

//File at: src/plugins/Movilizer.js
var Movilizer = function() ;

Movilizer.prototype.readGlobalVariable = function(varName, successCB, errorCB)

    result = "Hello World";
    successCB(result);


var movilizer = new Movilizer();

为了能够在我的 TypeScript 文件中使用 Movilizer 接口，我相信我需要制作一个 Movilizer.d.ts 定义文件。但是，我遇到了麻烦。我尝试了以下方法：

//File at: src/plugins/Movilizer/index.d.ts
//Also tried it at: src/plugins/Movilizer.d.ts
export = Movilizer;

declare class Movilizer 
    constructor();

    readGlobalVariable(key: string, onSuccess: (value: string) => void, onError: () => void): void;

我还尝试在我的tsconfig.json 文件中引用.d.ts 文件。添加这个并没有改变：

//File at: tsconfig.json
(...)
"files": [
    "src/plugins/Movilizer/index.d.ts"
],
(...)

我尝试在我的 FooPage 中使用该文件，如下所示。这确实编译：

//File at: src/pages/foo/foo.ts
import Component from '@angular/core';
import NavController from 'ionic-angular';
import Movilizer from '../../plugins/Movilizer';

@Component(
    selector: 'page-foo',
    templateUrl: 'foo.html'
)
export class FooPage 

    constructor(public navCtrl: NavController) 
        new Movilizer().readGlobalVariable("myGlobalVariable", (result) => 
            console.log('readGlobalVariable Success: ' + result);
        , () => 
            console.log('readGlobalVariable Failure!');
        );
    

我正在像这样测试应用程序：

$ ionic serve

这会立即崩溃并显示以下错误消息：

EXCEPTION: Error in ./FooPage class FooPage_Host - inline template:0:0 caused by: __WEBPACK_IMPORTED_MODULE_2__plugins_Movilizer___default.a is not a constructor
ErrorHandler.prototype.handleError
_callAndReportToErrorHandler/<
sg</d</t.prototype.invoke
NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvoke
sg</d</t.prototype.invoke
sg</v</e.prototype.run
h/<
sg</d</t.prototype.invokeTask
NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask
sg</d</t.prototype.invokeTask
sg</v</e.prototype.runTask
i
mh/</u
mh/<
Vl/r 

我的问题 如何在我的 TypeScript 文件中使用 Movilizer.js 文件？如果我需要.d.ts 文件，我该如何创建它？

【参考方案1】：

我注意到Movilizer.js 的代码中没有export。所以，它不是一个模块。然后，你不能import它。

您可以在浏览器中加载它，而不是作为 模块，而是作为 脚本（例如，不在 Webpack 中，而是使用标记 <script>）。然后它将作为全局变量存在。在 TypeScript 中，我们可以预期文件 Movilizer/index.d.ts 声明了全局变量。因此，您可以使用它。

相关：

Here are the differences 在modules 和scripts 之间； 也许可以在 Webpack 包中附加 Movilizer.js，例如 expose loader？

【讨论】：

@ABoschman：在Movilizer.js的代码中，我看不到任何export。此文件中是否有export？

@ABoschman：如果Movilizer中没有export，那么你一定不要import它。您可以在浏览器中加载它，而不是作为模块，而是作为 script（例如，不在 Webpack 中，而是使用标记 <script>）。然后它将作为全局变量存在。在 TypeScript 中，我们可以预期文件 Movilizer/index.d.ts 声明了全局变量。所以，你可以使用它。