プログラミング歴半年の素人が書いています。
間違いのないようご自身でも良く調べた上でお願いいたします。
はじめに
『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を使用するときは、この設定ファイルが必ず必要です。プロジェクトルートに作成します。
{
"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
{
"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の中身はなんでも良いのでとりあえずわかりやすくコンソールに出力しときます。
console.log('Hello TypeScript!')
コンパイルする！
ついにコンパイルの時間がやって来ました！
このままの.tsファイルでは実行できませんので、.jsに変換します。
変換は、以下のコマンドで一発です。
$ npx tsc
すると、distというディレクトリと、その中にindex.jsが自動で生成されました！
これがコンパイル...！
早速実行してみます。
$ node dist/index.js
Hello TypeScript!
無事、実行できました！
まとめ
端折らずに、TSのコンパイラの動きを確認することで、よりTypeScriptが馴染みのあるものになりました。
あとは存分にTSの型システムを楽しむだけ！やった〜。