TypeScriptでコーティングするために必要な環境構築についてまとめていきます。
※Udemyの内容を噛み砕いて私なりにまとめました。
TypeScript(TS)とは
JavaScript(JS)のスーパーセット(上位互換)
- 型を指定することができ堅牢なコードを書ける
- 古いWebページにも対応できる
などなど、さまざまな便利な機能が搭載されています。
TSで書いたコードはJSにコンパイル(変換)され、JSで動的なWebページを実現します。
環境構築
- VS-Codeで開発用フォルダを開く
- ターミナルを開く
⌘ + J - packege.jsonファイルの作成
npm init - 3実行時に設定についていくつか問われるが、全てEnterでOK
- lite-serverをpackege.jsonに追加
npm install dev-server lite-server - packege.jsonの
scriptsオブジェクトに手動で”start”: “lite-server”を追加- オブジェクトのプロパティは
,で区切らないとエラーになるので注意
- オブジェクトのプロパティは
- サーバープロセスを起動する
npm start
よく使うコマンド操作
| 名称 | 説明 | コマンド |
|---|---|---|
| コンパイル | TSからJSにコンパイル(変換)する機能 | tsc ファイル名 |
| ウォッチモード | TSをコンパイルすると、Webアプリが自動更新される機能 |
tsc ファイル名 —watch tct ファイル名 -w
|
| ファイルを開く | 1階層下のファイルを指定して開く | cd ファイル名 |
| ファイル戻る | ファイルを1階層戻る | cd .. |