TypeScript with jQuery 入門

ts-with-jquery-for-beginners.md

TypeScript with jQuery 入門

TypeScript with jQueryをつかった入門です。とりあえずやってみましょう。

準備

プロジェクトテンプレートをもってくる。あるいはForkする。

% git clone https://github.com/funnythingz/typescript-jquery-template.git
% cd typescript-jquery-template
% rm -rf .git

grunt, bower, testem インストール

% sudo npm install -g grunt-cli
% sudo npm install -g bower
% sudo npm install -g testem

Node モジュールインストール

% npm install

jQueryのインストール

% bower install https://github.com/jquery/jquery.git

ディレクトリ構造

• src/ ... *.ts, *.html
• build/ ... compiled file to *.js & *.html

コマンド

build

% grunt

watch

% grunt watch

localhost:8000

% grunt server

やってみよう

下のようなInterfaceをもったカルーセルをつくってください。DOMはまかせます。

interface ICarousel {
    hasNext(): boolean;
    haxPrev(): boolean;
    toNext(): void;
    toPrev(): void;
}

ただし書く上で、下記のルールを(なるべく)守ってください。

• 1つのメソッドにつきインデントは1段階までにすること
• else句を使用しないこと
• 1行につきドットは1つまでにすること
• 名前を省略しないこと
• すべてのエンティティ(オブジェクト)を小さくすること
• 1つのクラスにつきインスタンス変数(public)は4つ(できれば2つ)までにすること

var carousel: Carousel = new Carousel('#carousel');

$('#next').on('click', function() {
    if(carousel.hasNext()) {
        carousel.toNext();
    }
});

$('#prev').on('click', function() {
    if(carousel.hasPrev()) {
        carousel.toPrev();
    }
});

困ったら＼(^o^)／

TypeScript クイックガイド