スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

TypeScriptでjQueryを扱う with tsd

TypeScriptでjQueryを扱う with tsd



jQueryだけでなく、angular.jsなども使えます。




  • tsd : JavaScriptファイルをTypeScriptで扱うための型情報ファイルを簡単に落としてこれる

  • - 型ファイルはここから落とされる




    • 前提条件

    • - npmコマンドが使える
      - tscコンパイラを扱う環境が整っている http://gcc0aiya000.blog.fc2.com/blog-entry-51.html
      - gitコマンドが使える




      以下手順。



      tsdのインストール


      $ npm install -g tsd



      tsdを使ってjQueryを型情報ファイルを(カレントディレクトリに)落としてくる


       型情報ファイルは./typingsディレクトリ以下に自動で落とされるので、ファイルが散らばるとかはありません。
      $ tsd install jquery



      jQuery自体を落とすのを忘れずに


      $ wget http://code.jquery.com/jquery-2.1.4.min.js
      ( ブラウザなどで落としてきてもいい )



      jQueryを使った型安全プログラミング


       まずは、なんの変哲もないhtmlファイルです。

      hello.html


      <!DOCTYPE html>
      <html lang="ja">
      <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
      <script type="text/javascript" src="./hello.js"></script>
      </head>
      <body>
      </body>
      </html>


       次にTypeScriptをコンパイルしてみます。

      まずは、ちゃんと型エラーが出るか確認。

      hello.ts


      // jQueryの型情報を読み込みます
      ///
      $(() => { $("body").html(10); });


      $ tsc hello.ts
      hello.ts(2,26): error TS2345: Argument of type 'number' is not assignable to parameter of type '(index: number, oldhtml: string) => string'.

      多分、別のオーバーロードと思われてますね。

      コンパイル弾かれたので成功っ!



       今度は正しく動くか試してみます。

      hello.ts


      // jQueryの型情報を読み込みます
      ///
      $(() => { $("body").html("Hello, jQuery from TypeScript !!"); });


      $ tsc hello.ts

       エラーが出ませんでした!

      カレントディレクトリを見てみると、hello.jsというファイルができています。



      できた。


      ブラウザでhello.htmlを開いてみます。
      Result




      できた!



      TypeScriptyattahogehogbar.png

Ubuntu15.04にnodejsとtypescriptを入れた

Ubuntu15.04にnodejsとtypescriptを入れた



目的 : TypeScript実行環境を整える



1. どのパッケージをインストールすればいい?



参考ページ

http://y-anz-m.blogspot.jp/2012/11/ubuntu-typescript.html



ただしリポジトリを追加する必要はなかった

実際に行った作業は以下の通り。

これを実行するとnpm及びnodejsの実行環境が入る。


$ sudo apt-get install npm nodejs



次にTypeScriptをインストールする。


$ sudo npm install -g typescript



これでTypeScriptの実行環境が整った。

…が、実際にTypeScriptを実行するにはもうひとつだけ作業が必要だ。



だって、TypeScriptのコンパイラであるtscコマンドを叩くとこんなん言われるもん。


$ tsc -v
/usr/bin/env: node: そのようなファイルやディレクトリはありません




2. tscコマンドを実行できるようにする



参考ページ

http://improve.hatenablog.com/entry/2015/03/05/190251



ただしtsc自体を修正するのは嫌だったので、update-alternativesコマンドを使って

nodejsパッケージによりインストールされたnodejsコマンドをnodeコマンドに仕立て上げた。

( nodejsパッケージでnodeコマンドが入らない理由は上記サイト参照 )



作業は以下。


$ sudo update-alternatives --install /usr/bin/node node /usr/bin/nodejs 10
update-alternatives: /usr/bin/node (node) を提供するために自動モードで /usr/bin/nodejs を使います



これで/usr/bin/nodeに/usr/bin/nodejsへのリンクが貼られる。

alternativesが何かわからない、もしくは管理が面倒、という方は以下でいいと思う。 ( 非推奨 )


$ sudo ln -s /usr/bin/node /usr/bin/nodejs




結果


tcsコマンドで.tsファイルを.jsファイルにコンパイルできた。



静的型付けの中で型を忘れた話

静的型付けの中で型を忘れた話



 数日前、社内でこんな事件があった。



テスターさん「あいやさん、このチケット#XXXのテストをしようと思ったら、そもそも画面Aに飛べないんですけど…」

僕「ゑ?」



( 今うちではRedmineチケットでテストしてもらいたい項目を投げたりして管理してます。

他にいい方法あったら教えてください )




 その画面は、今回の仕様変更で実装した部分には直接的に関係ない部分だった。

しかし調べてみると、仕様変更に伴って修正したライブラリ部分に依存する処理がそこにはあった。



例外のスタックトレース曰く、原因はこんな感じのC#のコード。


public static class FooHelper {
public static int IntValue(this object o) {
int.Parse(o.ToString());
}
}

( コードの内容にツッコミは入れないものとする )



そして利用側のコードはこんなん。


...
var row = fooDataGridView.Rows[n];
var o = row.Cells["hoge"].IntValue();
// InvalidCastException



そういえばこのコードは以前、FooHelperクラスと別の名前空間のメソッド
HogeHelper.IntValue(DataGridViewCell)
を使用していた。



で、今回の仕様変更でそれを消していたので、オーバーロード解決がFooHelper.IntValue(object)に入ってしまってたみたい。



結論


  • 拡張メソッドでobjectはオーバーロードしない

  • 最低限のテストは自動化したい



  • Vim scriptで定数

    Vim scriptで定数




    let A = 10
    lockvar A
    let A = 20 " 例外


    これでできるらしい。

    ただし、これでできるのは「変数への書き込み禁止」であって

    書き込み禁止を解除することが可能。




    let A = 10
    lockvar A
    unlockvar A
    let A = 20 " 通る


    なので、強制力はないけど意味力のある変数…って感じになる。



    まとめるとこう書ける。




    let A = 10 | lockvar A



    さらに注意として、間接的に他の辞書などを書き換え禁止できない。


    let B = {'bar' : {'baz' : 30}} | lockvar B
    let B.bar.baz = 40 " 通る
    let C = {'hoge' : [10]} | lockvar C
    let C.hoge[0] = 20 " 通る



    もちろんこういう対策もできるはできる。


    let D = {'ahoge' : [10]} | lockvar D | lockvar D.ahoge[0]




    便利。





    追記



    強者さん達に助言をいただきました。




    もしくは



    前者の例を使うとこうなります。


    let A = {'foo' : {'bar' : 10}} | lockvar 3 A
    let A.foo.bar = 20 " 例外



    後者の例を使うとこうなります。


    let B = {'hoge' : {'baz' : 10}} | lockvar! B
    let B.hoge.baz = 20 " 例外



    koturnさん、pink_bangbiさん、ありがとうございます!



    itunes_bgm.vimのWrapperを書いてみて…ない

    僕らにbeautiful lifeを与える業のうち一つであるitunes-bgm.vim

    なにやら僕の環境だとitunes_bgm.vim
    :ITunesBGMStart

    あたりを
    ・再生中(非同期再生)の途中でもう一度コマンドを実行する
    or
    ・検索中(非同期検索)の途中で(ry
    を行うと二重に再生されたりしたので
    itunes_bgm.vimのWrapperを書いたような気がしたけど
    これはWrapperと言えるの?

    ※Vim script的にちょっと作法が悪い気がするので注意

    let s:itunes_bgm = {'playing' : 0}


    command! -bar -nargs=1 ITunesBGMSafeStart
    \ if s:itunes_bgm.playing
    \| call s:echo_error('vim-itunes-bgm already playing or searching now')
    \| else
    \| call itunes_bgm#start_by_term()
    \| let s:itunes_bgm.playing = 1
    \| if exists(':ITunesBGMStart') is 2
    \| delcommand ITunesBGMStart
    \| delcommand ITunesBGMPlay
    \| delcommand ITunesBGMStop
    \| delcommand ITunesBGMPlayList
    \| endif
    \| endif

    command! -bar -nargs=1 ITunesBGMSafePlay
    \ if s:itunes_bgm.playing
    \| call s:echo_error('vim-itunes-bgm already playing now')
    \| else
    \| call itunes_bgm#play()
    \| endif

    command! -bar ITunesBGMSafeStop
    \ call itunes_bgm#stop()
    \| let s:itunes_bgm.playing = 0


    " Current iTunes musics (Overridden)
    command! -bar ITunesBGMUnitePlayList Unite itunes_bgm




    結論


    書いた。


    追記


    あっこれUniteで選択した場合でもduplicateする。
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。