TypeScriptとは？
TypeScriptとは、マイクロソフトによって開発された、JavaScripで型定義を可能にできるように拡張した言語(AltJS)です。
AltJS、つまりJavaScriptの代替言語であり、コンパイル時にJavaScriptに変換されます。そして、互換性を持つスーパーセットであるため、JavaScriptと同様の記法が使えます。そのためJavaScriptの知識があればTypeScriptの学習コストはそこまで高くなく、スムーズに理解することができるでしょう。
また、TypeScriptは漸進的型付き言語(gradually typed language)であるので、プログラム内の全ての型を指定する必要はありません。これは既存のJavaScriptコードをTypeScriptに以降する際に非常に役に立ちますが、基本的には全ての型の指定をすることをおすすめします。
開発環境を整えよう
TypeScriptを試すために、まず開発環境を最低限整えましょう。
プラウザで手軽に試したい人は、こちらを使ってみてください。[https://www.typescriptlang.org/play]
VSCodeのインストール
https://code.visualstudio.com/
上記のURLから、それぞれのOSに合わせてDownloadしてください。VSCodeはTypeSciptの拡張機能が豊富なので、エディタに何を使うか迷っていたらおすすめです。
もちろんお好きなエディタを使っていただいて構いません。
Node.jsのインスール
Node.jsをインストールしていなければインストールしましょう。
Macの場合
# Nodebrewのインストール
$ brew install nodebrew
# インストールできたか確認
$ nodebrew -v
# LTSの最新版(https://nodejs.org/ja/)をインストール
$ nodebrew install-binary v12.18.3
# バージョンを指定
$ nodebrew use v12.18.3
# pathを通す(bashの場合)
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
# Node.jsのバージョン確認
$ node -v
Windowsの場合
この記事を参考にしてください。
https://qiita.com/maecho/items/ae71da38c88418b806ff
TypeScriptのインストール
フォルダを作って、その中でnpmプロジェクトを初期化しましょう。その後npmを使ってTSCとTSLintをインストールします。
以下のコマンドを順に実行してください。
# 好きな場所でフォルダを作ってください
$ mkdir typescript-start
$ cd typescript-start
# npmプロジェクトを初期化(全てEnterで大丈夫)
$ npm init
# TSC, TSLint, Node.js用の型宣言をインストール
$ npm install --save-dev typescript tslint @types/node
tsconfig.jsonの作成
ここまで順調にできたら、typescript-start ディレクトリ直下にtsconfig.json というファイルを作りましょう。
このファイルはどのファイルをコンパイルするかや、どのモジュールシステムにコンパイルするか、コンパイル結果をどのディレクトリに格納するか、などを定義するものになります。
それでは実際に作ってみましょう。以下のコマンドを実行しtsconfig.jsonファイルを生成し、VSCodeで開きましょう。
$ touch tsconfig.json
開けたら、以下の内容をかきこんでください。
{
"compilerOptions": {
"module": "commonjs",
"target": "es2015",
"outDir": "dist",
"sourceMap": true,
"strict": true
},
"include": [
"src"
],
"exclude": [
"node_modules"
]
}
今回用いるtsconfig.jsonのオプションについて、以下に簡単に説明します。
| オプション | 説明 |
|---|---|
| compilerOptions | コンパイルする際のオプションで、この配下にオプションを基本的に書いていきます |
| module | 出力するjsのモジュールで、何を使用するか指定(ex. CommonJS) |
| target | jsのバージョンを指定(ex. ex5) |
| outDir | jsファイルを出力するディレクトリ |
| sourceMap | trueにすると対応するソースマップファイルが生成されるようになる。ソースマップファイルはTypeScriptコードと生成されたJavaScriptコードの対応関係が記述されている |
| strict | 厳密な型チェックオプションを有効にする |
| include | コンパイルに含めるファイルと一致するパターンリストを記述 |
| exclude | コンパイルから除外するファイルパターンリストを記述 |
tslint.jsonの作成
tsconfig.jsonファイルが作れたと思うので、次はTSLintの設定を行うことのできるtslint.json を加えましょう。
TSLintの利用は必須ではありませんが、コードスタイルの統一のために導入しておくことをおすすめします。
導入するには、以下のコマンドを実行します。
$ ./node_modules/.bin/tslint --init
無事実行できたらtslint.json ファイルが生成されているはずです。
細かいルールなど公式を参考にしてみてください。今回はデフォルトのまま利用します。
tslint: https://palantir.github.io/tslint/usage/configuration/
TypeScriptの実装！
では、TypeScriptの実装に入りましょう。srcフォルダを作成し、中にindex.tsファイルを作ります。TypeScriptファイルは拡張子が.tsになります。
$ mkdir src
$ touch src/index.ts
index.tsファイルは以下のように記述します
const firstStep: string = "Let's start TypeScript!"
console.log(firstStep)
次にこのコードをコンパイルして実行しましょう。
# TSCでコンパイル
$ ./node_modules/.bin/tsc
# Node.jsで実行
$ node ./dist/index.js
# Let's start TypeScript!
無事「Let's start TypeScript!」という文字列が表示されたでしょうか？
また、tsconfig.jsonで設定したように、TSCでsrc以下のファイルがコンパイルされ、dist直下にjsファイルが生成されていることもわかると思います。
今回はここで終わりです。
こちらの記事でも同じ内容を記述しております。
またこちらでTypeScriptなどの情報を発信していく予定です。よろしければご覧ください。