Question

我必须使用TypeScript在Angular中导入UnityLoader.js。但是，该lib没有ts声明，需要配置变量（数组）才能工作（见下文）。

默认实施：

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | Test Unity</title>
    <style>
    /* a style sheet needs to be present for cursor hiding and custom cursors to work. */
    </style>
  </head>
  <body>
    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>
    <script type='text/javascript'>
/* Configuration variable here !! */
  var Module = {
    TOTAL_MEMORY: 268435456,
    errorhandler: null,         // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
    compatibilitycheck: null,
    dataUrl: "Development/ExportMiniDev.data",
    codeUrl: "Development/ExportMiniDev.js",
    memUrl: "Development/ExportMiniDev.mem",

  };
</script>
/* Library call here !! */
<script src="Development/UnityLoader.js"></script>
  </body>
</html>

我已阅读所有docs，然后我跟着this创建了一个声明文件。

这是我的声明文件（index.d.ts）：

// Type definitions for UnityLoader 5.4.3.f1
// Project: UnityLoader
// Definitions by: Alexandre Hagen <https://github.com/AlexandreHagen>

declare namespace UnityLoader {

    interface Module {
        TOTAL_MEMORY: number,
        errorhandler?: boolean,
        compatibilitycheck?: boolean,
        dataUrl: string,
        codeUrl: string,
        memUrl: string
    }

}
export {};

node_modules中的我的文件夹结构：

    .
    ├── ...
    ├── unity-loader                  
    │   ├── index.d.ts    # Ts declaration file
    │   ├── index.js    # It is a remame of UnityLoader.js
    │   └── package.js    # Package to npm
    └── ...

但我仍然不明白一件事。如何将我的声明链接到一个不在npm包中而只是一个.js的lib？事实上，docs似乎只关于npm包。

目前import unityLoader = require("unity-loader");正在运行，但没有导入UnityLoader.js ......所以我无法使用它。

那么我们可以在Typescript中使用一个简单的全局库呢？这个问题对我来说非常重要See here我希望你能提供帮助！

Ps：我正在使用Webpack来构建我的应用程序。

Answer 1

还不确定你是否解决了这个问题。我把它运行起来。但它并不像应该的那样好。我一到另一页然后回来就收到错误....但是我做了什么.. 我的组件：

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { UnityService } from './unity.service';
declare var jQuery: any;
declare function feet(): any;
declare function water(): any;

@Component({
  moduleId: module.id,
  selector: 'sd-about',
  templateUrl: 'about.component.html',
  styleUrls: [ 'about.component.css' ]
})
export class AboutComponent implements OnInit {
  public selectedValue: string;
  public data: any;

  constructor( private http: Http, private _unity: UnityService) {
  }

  ngOnInit(): void {
    jQuery.getScript('app/about/test.js');
    jQuery.getScript('assets/Unity/UnityLoader.js');
  }

  public toggle_feet() {
    feet();
  }

  public toggle_water() {
    water();
  }

  private onError( onError: any ) {
    console.log(onError);
  }

}

test.js：

var Module = {
  TOTAL_MEMORY: 568435456,
  errorhandler: null,
  compatibilitycheck: null,
  dataUrl: "assets/WebGL/WebGL.data",
  codeUrl: "assets/WebGL/WebGL.js",
  asmUrl: "assets/WebGL/WebGL.asm.js",
  memUrl: "assets/WebGL/WebGL.mem"
};

function unity() {
  console.log("Hello from Unity")
}

function water(){
  SendMessage("Build","Toggle_Water");
}

function feet(data){
  SendMessage("Build","Toggle_Feet", data);
}

希望这有帮助！我正在尝试将所有内容都移到服务中并摆脱jquery ....

创建一个d.ts文件到UnityLoader.js（Unity3D）

1 个答案: