在打字稿文件中使用JavaScript库

Question

I am trying to use the Phaser Input JS library in my TypeScript file.

I downloaded all the files to my project:

I have referenced the js files in my HTML page,

 <script type="text/javascript" src="phaser-input.js"></script>

and in my app.ts file.

/// <reference path="phaser-input.d.ts" />

But when I try to use it in my ts file and I write

var input = game.add.inputField(10, 90);

I get the error

Property 'inputField' does not exit on type 'GameObjectFactory'

Any suggestion on how to make it work is appreciated.

Answer 1

What you need to do is Declaration Merging.

The phaser-input.d.ts has it's own namespace Fabrique , and doesn't seem to merge to Phaser namespace or the GameObjectFactory class. So you need to do it manually by making another d.ts file and reference it in your app.ts

//index.d.ts
/// <reference path="phaser.d.ts" />
/// <reference path="phaser-input.d.ts" />

declare module Phaser {
  interface GameObjectFactory {
    inputField(x: number, y: number, inputOptions?: Fabrique.InputOptions): Fabrique.InputField
  }
}

//app.ts
///<reference path="index.d.ts" />

var input = game.add.inputField(10, 90);

Answer 2

Try using this syntax :

//phaser-input.d.ts
declare module "lib/phaser-input" {
  var input = game.add.inputField(10, 90);
}