プログラミング歴半年の素人が書いています。

間違いのないようご自身でも良く調べた上でお願いいたします。

はじめに

『TypeScript...やってみたい！』

でも、私のような初心者にとって結局のところ複雑性が増すことって避けがちなんですよね...。わかります、わかります。

そこで今回は、なるべく基本からTypeScriptをさらって行きたいと思います。
もちろん、互換性のあるTypeScriptのことですから、いきなり既存のプロジェクトやフレームワークに混ぜ込みながら使うこともできるのですが、なるべく小さい構成で、物事がどんな風に動いているのか基本を着実に理解していくことが大切だと思う、今日この頃です。

こちらは私が密かに尊敬(?)する岡部さんのTypeScriptに関するご意見:　読むとTS使ってみたくなる。

また、こちらの記事には大変お世話になりました。

TypeScriptのコンパイル

まず、TypeScript（以下TS）は、JavaScriptにコンパイル（トランスパイルという人もいる）してはじめて使うことができる言語です。「コンパイルする」とは簡単に言えば「変換する」ということ。

TSを実行するには、JavaScriptに変換することが必要です。

※つまり、TypeScriptはあくまでも「人間のための言語」なんだな、って思います。機械語（JavaScript）に変換しないと実行できない。

環境構築

Node.jsのインストール

なにはともあれNode.jsがないとお話になりませんので用意します。

`npm init`してパッケージ管理の準備をする

$ npm init

npm initするとpackage,jsonが自動生成され、パッケージ管理できるようになります。

TypeScriptと仲間たちのインストール

$ npm install save-dev typescript  # TypeScript
$ npm install save-dev tslint      # TSLint
$ npm install save-dev @types/node # 型システム

`tsconfig.json`の作成

TSを使用するときは、この設定ファイルが必ず必要です。プロジェクトルートに作成します。

tsconfig.json

{ 
  "compilerOptions" : { 
    "lib" : [ "es2015" ], 
    "module" : "commonjs" , 
    "outDir" : "dist" , 
    "sourceMap" : true , 
    "strict" : true , 
    "target" : "es2015" 
  }, 
  "include" : [ "src" ] 
}

設定ファイルは、大きく2つに分かれます。

"compilerOptions"は、その名の通り、コンパイル時にどういう変換をさせるのかを指定しています。

lib: あなたがどのバージョンのJSを書いているのか
module: TSがコンパイルする際にどの module system を使用するか
outDir: コンパイルされたコードをどのディレクトリに出力するか
sourceMap:ソースマップは変換後のソースと元のソースを関連付けるファイル（デバッグに使える）
strict: 厳しく型システムを使うか、優しめにするか
target: TSがどの JavaScript のバージョンにコンパイルして出力するかの設定

"include"は、.tsファイルを置く場所になります。TSコンパイラはこのパスを元に.tsファイルを探してきて、コンパイルします。

`tslint.json`の作成

こちらは、TSLintの設定ファイルです。TSLintは、簡単にいうとコーディングのルールを定めてくれるライブラリです。
TSLintにしたがってコードを書くことで、一貫性のある規則にしたがった美しいコードに一歩近ずくことができます。

以下のコマンドを実行することで、デフォルトのTSLintの設定を適用することができます。

$ npx tslint --init

tslint.json

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {},
    "rulesDirectory": []
}

TypeScriptのコードを書いてみる

`index.ts`の作成

では、.tsファイルを作ります。

先ほどコンフィグでsrc内に.tsファイルを記述することを指定したので、そのようにします。

ここまでで、以下のような構成になっています。

プロジェクトルート/
├──node_modules/
├──src/
│ └──index.ts
├──package.json
├──tsconfig.json
└──tslint.json

index.tsの中身はなんでも良いのでとりあえずわかりやすくコンソールに出力しときます。

index.ts

console.log('Hello TypeScript!')

コンパイルする！

ついにコンパイルの時間がやって来ました！
このままの.tsファイルでは実行できませんので、.jsに変換します。

変換は、以下のコマンドで一発です。

$ npx tsc

すると、distというディレクトリと、その中にindex.jsが自動で生成されました！
これがコンパイル...！

早速実行してみます。

$ node dist/index.js

Hello TypeScript!

無事、実行できました！

まとめ

端折らずに、TSのコンパイラの動きを確認することで、よりTypeScriptが馴染みのあるものになりました。

あとは存分にTSの型システムを楽しむだけ！やった〜。

TypeScriptとTSLintをなるべく基本から