Let's start TypeScript ~ 実行環境構築

Posted: July 27, 2020

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: コンパイルから除外するファイルパターンリストを記述

tsconfig.jsonのオプション(table_contentがnotionで実装されていないので表示されない)

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ファイルは以下のようにします
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に関する記事でコードを試したい時は是非この記事を参考にしてくださいね。

参考 : https://www.typescriptlang.org/