Javascript, Typescript のインストール

(2016.03.26 OS X El Capitan‎)

Javascript は、クラスベースのオブジェクト指向言語ではないため理解が難しく
敬遠していたのですが、ES6 からクラスベースで書けるようになったそうで、
インストールをしてみることにしました。

Typescript という Javascript に静的型付け機能などを追加した
プログラム言語も導入しました。

Home brew で　node.js と npm をインストール

node.js を導入すると、ブラウザでなくても javascript を実行できるようになるそうです。
また、npm は javascript のパッケージを管理するために使用するそうです。

Homebrew が導入済みなら、以下のコマンドで node.js と npm がインストールできました。

brew install node

Javascript で Hello World!

hello.js というファイルを以下のように作成しました。

console.log("Hello World!")

ターミナルで node hello.js と入力すると Hello World! と出力されました。

npm で typescript の導入

以下のコマンドで、typescript がインストールできました
（npm は brew install node とした時に既にインストールされています）。

npm install typescript -g

g オプションは、グルーバル環境にパッケージをインストールする際に指定するそうです。
npmコマンド覚え書き
などを参考にさせていただきました。

Typescript で Hello World!

以下のコマンドで、Atom に atom-typescript というパッケージを導入しました。
AtomでTypeScriptの環境を構築する などを参考にさせていただきました。

apm install atom-typescript

Atom を起動すると、atom-typescript が依存するプログラムが自動でインストールされました。
Atom エディタで hello2.ts というファイルを以下のように作成しました。

var greet: string = "Hello World!";
console.log(greet);

次に、atom-typescript/docs/tsconfig.md などを参考にして、
同じフォルダに tsconfig.json というファイルを以下のような感じに作成しました。

{
   "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "declaration": false
   },
   "compileOnSave": false,
   "filesGlob": [
      "./*.ts"
   ],
   "files": [
      "./hello2.ts"
   ],
   "atom": {
      "rewriteTsconfig": true
   }
}

atom-typescript には、エラーなどを自動検出してくれる機能が付いており、
もしミスがあると Atom エディタの下の方にあるウィンドウ等で警告をしてくれました。
バグの発生しやすいプログラムを作成する時には便利かもしれません。

Typescript tutorial などを参考にして、
ターミナルにて、以下のコマンドで .ts ファイルをコンパイルしました。

tsc -t es6 -m commonjs hello2.ts

こうすると、同じフォルダに hello2.js というファイルが作成されました。
あとは、同様に node hello2.js と入力すると Hello World! と出力されました。

Atom でコンパイルするには、Package -> TypeScript -> Build とするか、
tsconfig.json で、"compileOnSave": true とすればファイルを保存した際に hello2.js が作成されました。