Как расширить класс TypeScript из обычного Javascript, даже возможно?

Question

У меня есть класс машинопись

class BlockJsonBig { 

    private m_simpleStorage:simplestoragejs.SimpleStorage; 
    ... 
} 

и хотели бы иметь его продлить (подкласс) регулярный не функция TS как в:

var BlockJsonSmall = Block.extend({...}) 

поэтому в основном я хотел бы BlockJsonBig продлить BlockJsonSmall но BlockJsonSmall является чистым JS (не TS)

Возможно ли это?

tx для чтения,

Шон.

Answer 1

Возможно ли это?

Да. и идиоматических

ES6

class BlockJsonSmall extends BlockJsonBig { 

} 

ES5

var __extends = (this && this.__extends) || function (d, b) { 
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; 
    function __() { this.constructor = d; } 
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 
}; 

function BlockJsonSmall {} 
__extends(BlockJsonSmall, BlockJsonBig); 

_extends функция покрыта здесь: https://basarat.gitbooks.io/typescript/content/docs/classes-emit.html

Answer 2

Ну нашел решение, но это было не так тривиально ...

сначала вы хотите создать абстрактный класс tha т висит от модуля:

///<reference path="../jquery/jquery.d.ts" /> 
///<reference path="../backbone/backbone.d.ts" /> 

declare module TSLiteModules { 

    class Block extends Backbone.View<Backbone.Model> { 
    protected m_blockProperty:any; 
    protected m_block_id:any; 
    protected m_blockType:any; 
    protected _initSubPanel(i_panel:any); 
    protected getBlockData():any; 
    protected _initSubPanel(i_panel:string):void; 
    protected _getBlockPlayerData():any; 
    protected _loadBlockSpecificProps():any; 
    protected _viewSubPanel(i_panel:string):any; 
    protected _setBlockPlayerData(domPlayerData:any, notification:string):any; 
    public sayHello(); 
    } 
} 

Следующая вы хотите расширить абстрактный класс (в моем случае я использую требует AMD):

///<reference path="../../typings/lite/app_references.d.ts" /> 

define(['jquery', 'Block'], function ($, Block) { 
TSLiteModules['Block'] = Block; 


class BlockJson extends TSLiteModules.Block { 

    private m_options; 
    private m_actions:Object; 
    private m_jsonEventTable:any; 
    private m_jsonRowEventChangedHandler:Function; 
    private m_addNewEvent:Function; 
    private m_pathChange:Function; 
    private m_intervalInput:Function; 
    private m_playVideoCompletion:Function; 
    private m_removeEvent:Function; 
    private m_onDropDownEventActionGoToHandler:Function; 
    private m_onDropDownEventActionHandler:Function; 
    private m_selected:any; 

    constructor(options?:any) { 
     this.m_options = options; 
     super(); 
    } 
    ... 

и настоящая магия, это потому, что машинопись создает замыкание вокруг ваша глобальная переменная (то есть: именно поэтому мы ставим абстрактный класс внутри модуля, так путь будет такой же, как следующий заявляют)

window.TSLiteModules = {}; 

так, чтобы объяснить еще раз, вы первый создать свой член window.TSL iteModules = {}; который является глобальным, вы приступите путем создания модуля с абстрактным классом, который будет вызывать TS для создания элемента, как показано ниже:

define(['jquery', 'Block'], function ($, Block) { 
TSLiteModules['Block'] = Block; 
var BlockJson = (function (_super) { 
    __extends(BlockJson, _super); 
    ... 
     return BlockJson; 
})(TSLiteModules.Block); 
return BlockJson; 

и теперь вы можете продлить ванильный JavaScript с машинописью, получить полный IntelliSence и получить никаких жалоб от TS Transpiller и в то же время получить полный доступ к защищенным членам/методам ...

надеется, что это поможет кому-то ...

Вы можете найти код на:

https://github.com/born2net/signagestudio_web-lite/blob/master/_controllers/_blocks/BlockJson.ts

https://github.com/born2net/signagestudio_web-lite/blob/master/StudioLite.js

https://github.com/born2net/signagestudio_web-lite/tree/master/typings/lite