如何使用typescript

时间:2016-02-17 17:56:21

标签: javascript class oop extending-classes

我一直试图弄清楚如何在中午以后的大部分时间做这件事,而且我要么没有得到什么,要么我接近错误。

我目前正在开展一个项目,我需要覆盖已经拥有JS文件的现有Javascript对象。

第三方库有一个形状的基类,它是一个作为自执行函数创建的JS类。

在库中,有许多派生自这个类的形状,在引擎盖下看起来就像使用典型的调用/应用路径来扩展形状基类。

在我的代码中,我必须这样做以扩展其中一个形状(我们称之为simpleshape),以便实现我自己的自定义形状及其绘图代码。

function MyCustomShape() {
  simpleShape.call(this);
};

shapeUtils.extend(MyCustomShape, simpleShape);

MyCustomShape.prototype.redraw = function (param1, param2) {
  // my custom implementation here
};

" shapeUtils.extend"是形状库中的一个功能,它扩展了类,我不知道它究竟做了什么,而且它被严重混淆了。然而,我最终得到的是一个" MyCustomShape"实现simpleShape类的类及其属性等,正如您所看到的那样,我只是简单地覆盖重绘函数,图形库会在需要时调用它。

这一切在普通的旧javascript中工作得很好,但是我在TypeScript中工作,目前为了让它工作我已经在TS类中的嵌入式JS函数中加入了它使用它。

类似的东西:

class myTsClass {

  // constructor

  // private properties, functions etc

  private pointerToMyCustomShape: Function;

  private createMyCustomShape(){

    this.pointerToMyCustomShape = function MyCustomShape() {
      simpleShape.call(this);
    };

    shapeUtils.extend(MyCustomShape, simpleShape);

    MyCustomShape.prototype.redraw = function (param1, param2) {
      // my custom implementation here
    };

  }

  private someThingThatUsesTheShapeLibrary()
  {
    this.createMyCustomShape();


    // do stuff that uses the custom shape

  }

}

问题是,我现在需要向覆盖中添加一些新的属性和函数,这些属性和函数现在是继承类的一部分,并且因为这些属性不存在于任何类型的Typescript定义中,所以typescript拒绝构建该项目。

例如:

  private createMyCustomShape(){

    this.pointerToMyCustomShape = function MyCustomShape() {
      simpleShape.call(this);
    };

    shapeUtils.extend(MyCustomShape, simpleShape);

    MyCustomShape.prototype.redraw = function (param1, param2) {
      // my custom implementation here
    };

    MyCustomShape.prototype.myCustomFunction = function (param1, param2) {
      // my custom function implementation here
    };

  }

然后尝试做

this.pointerToMyCustomShape.myCustomFunction();

导致Typescript抛出一个摇摆因为"功能"不包含" myCustomFunction"的定义。

我当然可以将类型更改为"任何",然后浏览器中的javascript引擎会抛出一个摇摆器,因为它期待" simpleShape"和" simpleShape"没有" myCustomFunction"

的定义

所以,我的下一个攻击计划是创建一个实现" myCustomShape"直接在打字稿中例如:

class MyCustomShape {

  private redraw(param1: type, param2: type)
  {
    // Implementation here
  }

  private MyCustomFunction(param1: type, param2: type)
  {
    // Implementation here
  }

}

思考,因为我对第三方库有一些有限的D.TS定义

(有限,因为我自己创建了它们,还没有转换整个库,只是我正在使用的部分)

我应该能够做到

class MyCustomShape extends simpleShapeStatic {

  private redraw(param1: type, param2: type)
  {
    // Implementation here
  }

  private MyCustomFunction(param1: type, param2: type)
  {
    // Implementation here
  }

}

其中" simpleShape"是

interface simpleShapeStatic {

  // Properties and functions as implemented in simpleshape
  // according to the docs, here

}

但是我已经发现了,我无法做到。

在D.TS中,iv&e创建了存根,如下所示:

interface simpleShapeStatic {

  // Properties and functions as implemented in simpleshape
  // according to the docs, here

}

declare var simpleShape: simpleShapeStatic

所以我想我可以使用

class MyCustomShape extends simpleShape {

  private redraw(param1: type, param2: type)
  {
    // Implementation here
  }

  private MyCustomFunction(param1: type, param2: type)
  {
    // Implementation here
  }

}

但似乎我也做不到。

为了使事情变得复杂,我使用AMD模块做了所有这些,在requireJS下按需加载,所以我得到的任何类我需要能够使用

import customShape = require("myCustomShape");

目前,我只是绕圈子,所以我怎么能在我的JS库中扩展对象,使用Typescript,然后添加我自己的自定义,然后再使用它们通过导入机制的不同打字稿类。

干杯 美女

更新 - 25/8/2017

对于在Google搜索中发现此问题的任何人。我从来没有找到问题的答案。

SO中没有人提出任何线索,在我参与当时参与的项目工作时,我从来没有找到办法。

差不多一年后,我不再从事这个项目了,在离开之前,因为我找不到解决办法,我删除了与这个Q相关的所有代码,然后重写了整个事情在TypeScript中从头开始。

0 个答案:

没有答案