manmanrai’s diary

新米フロントエンジニアの勉強記録ブログ

TypeScript導入記録

理由

  1. TypeScriptの学習コストが低いっぽい、しかも厳密なJavaScriptバージョンらしい
  2. JavaScriptとTypeScript比べたら

    変数のデータ型あらかじめ決めておける。(静的型付け)
    クラスを簡単に記述できる

コンパイル環境作り

※ node.js公式サイトからダウンロードできます。

Node.js

前からnode.js入れてますので、コマンドで生存を確認します。

$ npm -v
3.10.10

大丈夫そうなので、インストールします。

$ npm install -g typescript
$ npm install -g typings

インストール終わったら、現在のバージョンを確認します。

$ tsc --version
Version 2.2.2
$ typings --version
2.1.1

ちゃんとインストールされてるようです。
次へ進みます。

参考サイトによると、node.js型定義を追加しなければいけないようなんですが、実は入れる前にこっそりコンパイルしてみました。

テスト手順:

テスト用のフォルダを作って、TypeScript練習用コードを適当に入れてapp.tsファイルを作成します。

var Message: string;
class Cat{
    age: number;
    weight: number;
}
var myCat = new Cat();
myCat.age = 3;
myCat.weight = 5.1;
Message = "Cat " + myCat.age + " and" + myCat.weight;
alert(Message);

コマンドでそのフォルダに移動し、コンパイルコマンド入れます。

$ tsc --outFile file.js app.ts

コマンド上で何にも表示出ませんでしたが、実際にそのフォルダを開くと、file.jsちゃんと生成されました。

var Message;
var Cat = (function () {
    function Cat() {
    }
    return Cat;
}());
var myCat = new Cat();
myCat.age = 3;
myCat.weight = 5.1;
Message = "Cat " + myCat.age + " and" + myCat.weight;
alert(Message);

無事に動けるなら、念のため、参考サイト言う通り「node.js型定義」を追加します。
意味いまいち分かりませんが、将来使うかもしれないので、一応入れときます。

$ typings install dt~node --global
node

これでTypeScriptでコンパイルできるようになりました。

2017年の目標は脱jqueryです。

参考サイト

www.atmarkit.co.jp

qiita.com