5分でTypeScriptしようぜ

JSの動的型付けをコンパイル時に許容しないAltJSの代表格であるTypeScript。
前々から気になっており、時間ができたのでさわってみました。
TypeScirptさわったことあるよ！って5分で言える記事を書いてみました。

1. ざっくり概要 (1分)

公式HP: TypeScript - JavaScript that scales
Playground: Playground - TypeScript

• マイクロソフトが開発しているOSSのプログラミング言語、いわゆるAltJS
• もちろんJSベース、設計思想はJavaの影響を受けている
• TypeScriptからJavaScriptにコンパイルして互換性を保つ
• ES6以降の要素を取り入れつつ、静的な型付けやクラスベースのオブジェクト指向を実現

2. 導入 (1分)

動きだけみたい人はPlaygroundでもいいと思います

% mkdir typescript_learn && cd $_
% sudo npm install -g typescript

/usr/local/bin/tsserver -> /usr/local/lib/node_modules/typescript/bin/tsserver
/usr/local/bin/tsc -> /usr/local/lib/node_modules/typescript/bin/tsc
+ typescript@3.2.1
added 1 package from 1 contributor in 10.937s


   ╭───────────────────────────────────────────────────────────────╮
   │                                                               │
   │       New major version of npm available! 5.6.0 → 6.1.0       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.1.0   │
   │               Run npm install -g npm to update!               │
   │                                                               │
   ╰───────────────────────────────────────────────────────────────╯

3. コンパイルから実行まで(3分)

3-1. main.tsを作成

拡張子は.tsが一般的だそうです

% pwd
~/typescript_learn
% touch main.ts

3-2. main.tsをいじる

TypeScriptの醍醐味であるclassを書いてみる

main.ts

class User {

}

console.log("hello world"); // 通常のJSも共存して書ける

3-3. Let's Compile!!

• tscコマンドでコンパイル
• main.jsファイルが生成される

% ls
main.ts
% tsc main.ts
% ls
main.js main.ts 

3-4. コンパイルされたmain.jsを確認

main.js

var User = /** @class */ (function () {
    function User() {
    }
    return User;
}());
console.log("hello world");

• class User{}の記述だけで、JSでクラスっぽい書き方を実現してくれている。
• JSDocもデフォルトで付くみたい。最近のバージョンの仕様っぽい。
• 簡潔に書けるのが何よりイイね！
• そしてコンパイルってなんか楽しい。

3-5. JSファイル実行

実行はもちろん.jsファイル側

% node main.js
% hello, world