社内でTypeScriptの環境構築について説明する機会があったので、備忘録として記事にまとめることにしました。

Typescriptはjavascriptを拡張して開発された新しいプログラミング言語
特徴として静的型付けなどがある。
元々のjavascriptは動的型付け言語。
ただ、TypeScriptを使用するとコンパイル時に型のチェックを行ってくれる。

静的型付け言語とは変数や引数を使う場合にデータ型をあらかじめ宣言をする言語

データ型の指定を誤ると、プログラムが意図しない動作をすることが多々ある。
複数人が開発を行うチーム開発では、本来想定していないデータ型でソースコードを書いてしまう場合がある。

hoge.ts

let hoge = 1;
hoge = hoge + 1;
console.log(hoge);

こんなコードがあったとする。
出力される結果は2が表示される。

hogehoge.ts

let hoge = "1";
hoge = hoge + 1;
console.log(hoge);

このコードを実行すると、出力結果は11になる。

二つのコードの違いは変数のデータ型の違い。
このように型が違っていると、意図しない結果になる。

こういったミスを防ぐために静的型付けで事前にデータ型の宣言をしている。

hogehoge.ts

let hoge :number = "1";
hoge = hoge + 1;
console.log(hoge);

このコードではhogeという変数に対してnumberのデータ型を指定している。

npx tsc hogehoge.ts

このコードをTypeScriptでコンパイルしようとした時に
データ型の指定が誤っているとエラー文が表示され、
コンパイルが失敗する。

まずはNode.jsのインストールを行う

上がnode.jsの公式サイト。
こちらからダウンロードを行う。
特別な設定などいれない場合はデフォルトでいいと思います。

npmを利用するため
→「npm」とはNode.jsのパッケージを管理するためのツール。
pythonで例えるなら、pipがパッケージ管理ツールになります。
npmにtypescriptというパッケージをインストールするためにNode.jsをインストールします。

Node.jsとはサーバーサイドでもjavascriptを使用するために作られたjavascriptの実行環境

Node.jsとは実行環境を指すもので Typescriptはプログラミング言語

Node.jsをインストールした後は
指定のフォルダで

npm init

npm initでプロジェクトの新規作成を行う

npm install typescript

npx tsc --version

インストールが終わったら、バージョンを確認

TypeScriptはtscコマンドを実行することで、tsファイルをjsファイルにコンパイルすることができる。

npx tsc hogehoge.ts

これがTypeScriptのコンパイル時のコマンド。
このコマンドを実行することで、hogehoge.jsというjsファイルにコンパイルされた形でファイルが出力される。

このnpxとはNode.jsのパッケージの実行ツール。
パッケージをグローバルにインストールしている場合はnpxを省いても実行ができる。
グローバルでのインストールはnpm install時に-gをオプションを付ける。

ただ、PJ毎によってTypeScriptのバージョンを使い分けたい場合はローカルでインストールした方がいいと思います。

ESlintはJavascriptの静的解析ツール。
Eslintを設定しておくと、セミコロンを文末に付けることの規則を作成したり、クラス名の命名規則を設定できる。

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

npx eslint --init

上のコマンドでeslintの設定ファイル .eslintrcが作成される

vscodeで使用する場合はvscodeの拡張機能であるEslintをインストールする。