はじめに
社内でTypeScriptの環境構築について説明する機会があったので、備忘録として記事にまとめることにしました。
TypeScriptとは？
Typescriptはjavascriptを拡張して開発された新しいプログラミング言語
特徴として静的型付けなどがある。
元々のjavascriptは動的型付け言語。
ただ、TypeScriptを使用するとコンパイル時に型のチェックを行ってくれる。
そもそも静的型付け言語って何？
静的型付け言語とは変数や引数を使う場合にデータ型をあらかじめ宣言をする言語
静的型付けを使う理由
データ型の指定を誤ると、プログラムが意図しない動作をすることが多々ある。
複数人が開発を行うチーム開発では、本来想定していないデータ型でソースコードを書いてしまう場合がある。
let hoge = 1;
hoge = hoge + 1;
console.log(hoge);
こんなコードがあったとする。
出力される結果は2が表示される。
let hoge = "1";
hoge = hoge + 1;
console.log(hoge);
このコードを実行すると、出力結果は11になる。
二つのコードの違いは変数のデータ型の違い。
このように型が違っていると、意図しない結果になる。
こういったミスを防ぐために静的型付けで事前にデータ型の宣言をしている。
let hoge :number = "1";
hoge = hoge + 1;
console.log(hoge);
このコードではhogeという変数に対してnumberのデータ型を指定している。
npx tsc hogehoge.ts
このコードをTypeScriptでコンパイルしようとした時に
データ型の指定が誤っているとエラー文が表示され、
コンパイルが失敗する。
Node.jsのインストール
まずはNode.jsのインストールを行う
上がnode.jsの公式サイト。
こちらからダウンロードを行う。
特別な設定などいれない場合はデフォルトでいいと思います。
Node.jsをインストールする理由
npmを利用するため
→「npm」とはNode.jsのパッケージを管理するためのツール。
pythonで例えるなら、pipがパッケージ管理ツールになります。
npmにtypescriptというパッケージをインストールするためにNode.jsをインストールします。
Node.jsとは何か？
Node.jsとはサーバーサイドでもjavascriptを使用するために作られたjavascriptの実行環境
Node.jsとは実行環境を指すもので Typescriptはプログラミング言語
Node.jsをインストール後~
プロジェクトの新規作成
Node.jsをインストールした後は
指定のフォルダで
npm init
npm initでプロジェクトの新規作成を行う
TypeScriptをインストール
npm install typescript
npx tsc --version
インストールが終わったら、バージョンを確認
TypeScriptのコンパイル
TypeScriptはtscコマンドを実行することで、tsファイルをjsファイルにコンパイルすることができる。
npx tsc hogehoge.ts
これがTypeScriptのコンパイル時のコマンド。
このコマンドを実行することで、hogehoge.jsというjsファイルにコンパイルされた形でファイルが出力される。
このnpxとはNode.jsのパッケージの実行ツール。
パッケージをグローバルにインストールしている場合はnpxを省いても実行ができる。
グローバルでのインストールはnpm install時に-gをオプションを付ける。
ただ、PJ毎によってTypeScriptのバージョンを使い分けたい場合はローカルでインストールした方がいいと思います。
Eslintのインストール
ESlintはJavascriptの静的解析ツール。
Eslintを設定しておくと、セミコロンを文末に付けることの規則を作成したり、クラス名の命名規則を設定できる。
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
npx eslint --init
上のコマンドでeslintの設定ファイル .eslintrcが作成される
vscodeで使用する場合はvscodeの拡張機能であるEslintをインストールする。
例:セミコロンの関連ルール
https://qiita.com/mysticatea/items/9da94240f29ea516ae87
参考にさせて頂いた記事