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

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

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

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ファイルは以下のように記述します

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/