在 Ionic 2 项目中导入单个第三方 JavaScript 文件时出现打字稿错误

Question

我正在将一个html网站迁移到Ionic应用程序中。

html 站点使用名为"Swiffy"的旧 javascript 动画运行时文件：http://www.gstatic.com/swiffy/v5.4/runtime.js

通常，这是它在旧站点中的使用方式：

1)包括运行时并声明一个带有一堆生成的代码的swiffyObject。

<script type="text/javascript" src="...path/to/swiffy.js"></script>
<script>swiffyobject = {"internedStrings":["::::50g2s..... a bunch of really long code...</script>

2) 文档准备就绪时启动 Swiffy 对象

$(document).ready(function(){
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),swiffyobject);
stage.setBackground(null);
stage.start();
....

我试图在一个全新的 Ionic 2 项目中做同样的事情：

1)将脚本包含在 src/index.html

<script type="text/javascript" src="...path/to/swiffy.js"></script>
<script>swiffyobject = {"internedStrings":["::::50g2s..... a bunch of really long code...</script>

2) 在主页中插入脚本 ionViewDidLoad：

ionViewDidLoad() {
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),swiffyobject);
stage.setBackground(null);
stage.start();
}

不幸的是，它不起作用。运行离子服务时，会发生两个错误：

Cannot find name 'swiffy'.
Cannot find name 'swiffyobject'.

我是 Angular 2 的新手，我很确定主页打字稿文件不知道索引中声明的全局变量 swifft 和 swiffyobject.html

我试过这个：

var stage = new window["swiffy"].Stage(document.getElementById('swiffycontainer'),window["swiffyobject");
stage.setBackground(null);
stage.start();
}

没有打字稿编译，但它也不起作用，抱怨无法读取未定义的属性"阶段">

如何获取索引.html中声明的变量？

Answer 1

在AppModule文件中声明这些变量

declare let swiffy : any;
declare let swiffyobject: any;
@NgModule({
//...
})
export class AppModule{}

Answer 2

找不到名称 'swiffy'。

找不到名称"swiffyobject"。

为了避免这些错误(因为它只是打字稿抱怨对这些类型一无所知)，你可以在你想要使用它们的同一个组件文件中声明它们，如下所示：

declare var swiffy: any;
declare var swiffyobject: any;
@Component({...})
...

这足以让打字稿开心。

但是，另一方面，现在我们应该在控制台中检查这两个属性是否由要导入的脚本创建和设置。如果未设置它们，请检查js 库的路径是否正常，并查看该代码以查看属性是否被创建为全局对象。

您正在导入的脚本的第二行似乎创建了swiffyobject，但我不知道swiffy脚本是否也正确创建。