スポンサーサイト

上記の広告は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ファイルにコンパイルできた。



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