TypeScriptを始めよう ~ すぐにできる実行環境構築 ~

## TypeScriptとは？

**TypeScript**とは、マイクロソフトによって開発された、JavaScripで**型定義**を可能にできるように拡張した言語(**AltJS**)です。

AltJS、つまりJavaScriptの代替言語であり、コンパイル時にJavaScriptに変換されます。そして、互換性を持つスーパーセットであるため、JavaScriptと同様の記法が使えます。そのためJavaScriptの知識があればTypeScriptの学習コストはそこまで高くなく、スムーズに理解することができるでしょう。

また、TypeScriptは**漸進的型付き言語**(gradually typed language)であるので、プログラム内の全ての型を指定する必要はありません。これは既存のJavaScriptコードをTypeScriptに以降する際に非常に役に立ちますが、基本的には全ての型の指定をすることをおすすめします。

## 開発環境を整えよう

TypeScriptを試すために、まず開発環境を最低限整えましょう。

プラウザで手軽に試したい人は、こちらを使ってみてください。[[https://www.typescriptlang.org/play](https://www.typescriptlang.org/play)]

### VSCodeのインストール

[https://code.visualstudio.com/](https://code.visualstudio.com/)

上記のURLから、それぞれのOSに合わせてDownloadしてください。VSCodeはTypeSciptの拡張機能が豊富なので、エディタに何を使うか迷っていたらおすすめです。

もちろんお好きなエディタを使っていただいて構いません。

### Node.jsのインスール

Node.jsをインストールしていなければインストールしましょう。

**Macの場合**

```bash
# 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](https://qiita.com/maecho/items/ae71da38c88418b806ff)

### TypeScriptのインストール

フォルダを作って、その中でnpmプロジェクトを初期化しましょう。その後npmを使ってTSCとTSLintをインストールします。

以下のコマンドを順に実行してください。

```bash
# 好きな場所でフォルダを作ってください
$ 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で開きましょう。

```bash
$ touch tsconfig.json
```

開けたら、以下の内容をかきこんでください。

```json: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の利用は必須ではありませんが、コードスタイルの統一のために導入しておくことをおすすめします。

導入するには、以下のコマンドを実行します。

```bash
$ ./node_modules/.bin/tslint --init
```

無事実行できたら`tslint.json` ファイルが生成されているはずです。

細かいルールなど公式を参考にしてみてください。今回はデフォルトのまま利用します。

tslint: [https://palantir.github.io/tslint/usage/configuration/](https://palantir.github.io/tslint/usage/configuration/)

## TypeScriptの実装！

では、TypeScriptの実装に入りましょう。srcフォルダを作成し、中に`index.ts`ファイルを作ります。TypeScriptファイルは拡張子が`.ts`になります。

```bash
$ mkdir src
$ touch src/index.ts
```

`index.ts`ファイルは以下のように記述します


```tsx:index.ts
const firstStep: string = "Let's start TypeScript!"
console.log(firstStep)
```

次にこのコードをコンパイルして実行しましょう。

```bash
# 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ファイルが生成されていることもわかると思います。

今回はここで終わりです。

[こちらの記事](https://tyotto-good.com/blog/start-typescript)でも同じ内容を記述しております。
また[こちら](https://tyotto-good.com)でTypeScriptなどの情報を発信していく予定です。よろしければご覧ください。


参考 : [https://www.typescriptlang.org/](https://www.typescriptlang.org/)