JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年05月 / 04月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>06月

アクセスランキング

[ジャンルランキング]
コンピュータ
387位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
42位
アクセスランキングを見る>>

JS互換のオブジェクト指向言語 "TypeScript"

最近、"TypeScript"という言語が気になっています。

特徴としては、静的型付け、よりオブジェクト指向な書き方ができる、容易に開発ができるなど。
コードはすべてJavaScriptに変換でき、またJSにより書かれたコードもTypeScriptで動くということです。

まあ細かいことはこちらからどうぞ。

Welcome to TypeScript
http://www.typescriptlang.org/

開発環境は、Visual Studio 2012やWebMatrixにプラグインを追加するだけで用意できます。
http://www.typescriptlang.org/#Download


とりあえず、一年半ほど前に書いた「Select要素をListBoxっぽく使うコード」を元に書いてみました。
以下からどうぞ。
more...

まずこれが、TypeScriptの書式で書いたものです。JavaやAS3によく似ています。そのためか、通常のJSと比べて、クラス、メソッド、コンストラクタなどの関係がわかりやすいコードになります。
(型やスコープの宣言はJSに変換したときに除かれるようです)
class listBox{
    public elem: any;
    
    constructor(_elem: any){
        if (typeof _elem != "undefined"){
            this.elem = _elem;
            _elem.elem = this.elem;
        } else {
            this.elem = document.createElement("select");
        }
        this.elem.add = this.add;
        this.elem.clear = this.clear;
        this.elem.removeAt = this.removeAt;
        this.elem.selectValue = this.selectValue;
        this.elem.selectIndex = this.selectIndex;
    }

    public add(_val: string, _txt: string, _isSelected: bool){
        var _insEl = document.createElement("option");
        _insEl.value = _val;
        _insEl.innerText = _txt;
        _insEl.innerHTML = _txt;
        if ((typeof _isSelected != "undefined") && _isSelected){
            _insEl.selected = "selected";
        }
        this.elem.appendChild(_insEl);
    }

    public clear(){
        while(this.elem.firstChild){
            this.elem.removeChild(this.elem.firstChild);
        }
    }

    public removeAt(_remIndex: number){
     this.elem.removeChild(this.elem.getElementsByTagName("*")[_remIndex]);
    }

    public selectValue(_val: string){
        var _c: number;
        var _allItems: any[];

        _allItems = this.elem.getElementsByTagName("option");
        for(_c = 0;_c < _allItems.length; _c++){
            if (_allItems[_c].value == _val){
                this.elem.selectedIndex = _c;
                break;
            }
        }
    }

    public selectIndex(_selIndex: number){
        this.elem.selectedIndex = _selIndex;
    }
}


そしてこれがJavaScriptに変換したもの。
var listBox = (function () {
    function listBox(_elem) {
        if(typeof _elem != "undefined") {
            this.elem = _elem;
            _elem.elem = this.elem;
        } else {
            this.elem = document.createElement("select");
        }
        this.elem.add = this.add;
        this.elem.clear = this.clear;
        this.elem.removeAt = this.removeAt;
        this.elem.selectValue = this.selectValue;
        this.elem.selectIndex = this.selectIndex;
    }
    listBox.prototype.add = function (_val, _txt, _isSelected) {
        var _insEl = document.createElement("option");
        _insEl.value = _val;
        _insEl.innerText = _txt;
        _insEl.innerHTML = _txt;
        if((typeof _isSelected != "undefined") && _isSelected) {
            _insEl.selected = "selected";
        }
        this.elem.appendChild(_insEl);
    };
    listBox.prototype.clear = function () {
        while(this.elem.firstChild) {
            this.elem.removeChild(this.elem.firstChild);
        }
    };
    listBox.prototype.removeAt = function (_remIndex) {
        this.elem.removeChild(this.elem.getElementsByTagName("*")[_remIndex]);
    };
    listBox.prototype.selectValue = function (_val) {
        var _c;
        var _allItems;
        _allItems = this.elem.getElementsByTagName("option");
        for(_c = 0; _c < _allItems.length; _c++) {
            if(_allItems[_c].value == _val) {
                this.elem.selectedIndex = _c;
                break;
            }
        }
    };
    listBox.prototype.selectIndex = function (_selIndex) {
        this.elem.selectedIndex = _selIndex;
    };
    return listBox;
})();


他には、モジュールやクラスの継承なんかもサポートされています。

#細かいことはこのドキュメントに詳しく書かれています。
TypeScript Language Specification
http://www.typescriptlang.org/Content/TypeScript%20Language%20Specification.pdf


コードを載せたので、ついでにこのクラスの使い方の説明も簡単に載せておきます。

ListBox class デモ
121024listBox.html

// 引数無しの場合はSelectElementを勝手に生成
var liBox = new listBox();

// listBox.elem = [object HTMLSelectElement]
document.getElementById("area").appendChild(liBox.elem);

// ListBox.add("value","text");
liBox.add("listBox","リストボックスもどき");
liBox.add("value","表示文字列");
liBox.add("1","TypeScript");

// "value"を選択
liBox.selectValue("value");



// こんなのもあり
var selElem = document.createElement("select");
new listBox(selElem);
document.getElementById("area").appendChild(selElem);

selElem.add("listBox","リストボックスもどき");
selElem.add("value","表示文字列");
selElem.add("1","TypeScript");
selElem.add("2","JavaScript");

// 3番目の要素を選択
selElem.selectIndex(2);

// 4番目の要素を削除
selElem.removeAt(3);

#これくらいの機能は標準で用意してくれていても良いと思いますが…

というわけで、時々TypeScriptの記事も書いてみたりするかもしれません。
 


 
   JavaScript    TB(1)    CM(0)    EDIT    ページ↑

コメント投稿


 管理者だけに表示

コメント

トラックバック

この記事へのトラックバック:

まとめ【JS互換のオブジェクト】 [ まっとめBLOG速報 ]
最近、"TypeScript"という言語が気になっています。特徴としては、静的型付け、よりオブジェクト指向な書
2012年11月19日(月) 15:04

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。