funnythingz/ts-with-jquery-for-beginners.md

## ts-with-jquery-for-beginners.md

      
    Raw
  

              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 クイックガイド