CODEWITHSUNDEEP
typescript
born2net
born2net

Reputation: 24953

how to extend a TypeScript class from a regular Javascript, even possible?

I have a typescript class

class BlockJsonBig {

    private m_simpleStorage:simplestoragejs.SimpleStorage;
    ...
}

and would like to have it extend (subclass) a regular non TS function as in:

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

so basically I would like BlockJsonBig to extend BlockJsonSmall but BlockJsonSmall is pure JS (not TS)

Is it possible?

tx for reading,

Sean.

Upvotes: 2

Views: 1941

Answers (2)

born2net
born2net

Reputation: 24953

Well found the solution but it was not that trivial...

first you want to create an abstract class that hangs from a module:

///<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();
   }
}

next you want to extend your abstract class (in my case I use require 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();
    }
    ...

and the real magic, is because TypeScript creates a closure around your global variable (i.e: that's why we put the abstract class inside a module so the path will the same as the following declare)

   window.TSLiteModules = {};

So to explain again, you first create your member of window.TSLiteModules = {}; which is global, you proceed by creating an module with an abstract class which will cause TS to create the member as shown below:

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

and now you can extend vanilla JavaScript with TypeScript, get full IntelliSence and get no complaints from the TS Transpiller and at the same time get full access to protected members / methods...

hopes this helps someone...

You can find the code at:

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

Upvotes: 0

basarat
basarat

Reputation: 275857

Is it possible?

Yes. and idiomatic

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);

The _extends function is covered here : https://basarat.gitbooks.io/typescript/content/docs/classes-emit.html

Upvotes: 2

Related Questions