私はvimが大好きです。
JavaScriptを直接書くなら迷わずvimを起動します。
しかし、時代の波はJavaScriptを直接書くことを許してくれないようです。
BabelやCoffeeScriptなどで開発したソースをトランスパイルすることでJavaScriptにする。（各種ブラウザやバージョンに対応するのは人間にはシンドイ世の中になってきました）
そんな中、普段からVisual Studioを使用する機会が多い私はVSCodeを使いたいです。
ということはTypeScriptの出番ですね。
TypeScriptからJavaScriptを生成するまでの手順を簡単にまとめます。
Visual Studio Codeのインストール
公式サイト：Download Visual Studio Codeからdownload→インストールでOK。
日本語はインストール後に「拡張機能」から「Japanese Language Pack for Visual Studio Code」をインストールしてvscodeを再起動すればOK。
ちなみに、Language Packには『インストールが完了したら、Japanese Language Pack を読み込むために locale.json 内で "locale": "ja" を設定します。』という説明があるのですが、自分はインストール＋再起動だけで日本語になったんですよね・・・？
あれ、localeの設定って最近は必要無い？
npm, Node.jsのインストール
npmとNode.jsをインストールします。
npmとNode.jsのバージョンを切り替えて使用できるようにしたい場合はnvmあたりを使用しましょう。
インストール方法は既に先人の方々が説明してくれているので。。。
npmとNode.jsを直接インストールする場合
Windowsでのnode.jsとnpmのインストール方法
Node.js Windows 版バージョン 10.15.3 のインストール
などを参考にインストールしましょう。
バージョンを切り替えられるようにする場合
nvm + Node.js + npmのインストール
nvmを使ったNode.jsのインストール&バージョンアップ手順
が参考になると思います。
準備（お試しテスト環境）
ここまででvscodeとnpm+Node.jsが使えるようになりました。
これだけで開発環境は整っています、後は使い方だけです。
という事で、お試しでtsからjsを生成してみます。（このTypeScriptで書かれたプログラムからJavaScriptのコードを生成することをトランスパイルといいます）
ディレクトリ準備
どこでもよいので以下のようなディレクトリを用意します。
/ts_test
中身は空
はい、用意というかディレクトリ切っただけでした。
package.jsonの生成
以下のコマンドはvscodeからも実行出来ますが、個人的にコマンドはプロンプトから実行するのが好きなので（CUIバンザイ）コマンドプロンプトから実行する方法で説明します。
-
コマンドプロンプトを起動
-
ts_testディレクトリに移動
-
npm initを実行
-
とりあえずテストなのですべて未設定でOKにする
すべて完了したらディレクトリを確認します。
無事package.josnが生成されています。
package.jsonが何か？という疑問に関して、これまた先人の方が詳しく説明してくれているので、
npmでライブラリをインストールする方法
package-lock.jsonの役割とは？【Node.js】
お任せしたいと思います（おいおい）
typescriptのインストール
package.jsonが出来たところ、Typescriptを使うためのパッケージをインストールしたいと思います。
npm install -D typescript
まず-Dですが、これは--save-devを短くしたものです。
--save-devで指定されたパッケージはpackage.josnのdevDependencies に追加されます。
devDependencies は開発時のみ使用するパッケージを指します。
typescritpなどのパッケージのインストール方法の説明で多いのが-gを付けてインストールする方法ですが、、、-gはグローバル環境にtypescriptをインストールしてね。という設定になります。
個人的にはネットワーク速度も速く、HDDも余裕のある現在、パッケージはプロジェクト毎にインストールした方が環境に依存しないpackage.jsonを作れるため良いのではないかと思っています。
（-gでインストールしている場合、別のどこかでインストールされたパッケージが既に入っているから自分の環境だと問題ない。なんて現象も起きたりします）
tscコマンドをnpmで実行出来る様にする
しかし！
-gでtypescriptをインストールしていない場合、以下のコマンドが使えません。
tsc -v
これは、グローバル環境にtypescriptをインストールしていないため、tscコマンドが解決されていないため発生する現象になります。
そのため、tscコマンドを実行するために以下の設定を行います。
"scripts": {
"tsc": "tsc", <--------これを追加
"test": "echo \"Error: no test specified\" && exit 1"
},
package.jsonの設定後に以下の様にコマンドを実行します。
npm run tsc -- -v
今度はちゃんとバージョンが表示されました。
scriptsに"tsc"を追加したことにより、npm runコマンドでtscが実行出来る様になりました。
"tsc"だけで実行するより不便かもしれませんが、環境を汚さないことを考えたら許容できないですか？
尚、npm run tscの場合、引数は--の後に渡す必要があるため-- -vとなっています。
tsconfig.jsonの生成
これでtscコマンドが使えるようになったので、次にtsconfig.jsonを生成します。
-
npm run tsc -- --initを実行 - vscodeからtsconfig.jsonを編集
編集内容はテストなのでts_testディレクトリ直下のtsファイルをindex.jsにまとめることにする。
"compilerOptions": {
"outDir": "./", <---- コメントを外す
}, <---- 意外と忘れるカンマの追加
"exclude": [ <---- これを追加
"node_modules"
]
index.tsを新規作成
これまたテストなので適当な内容を準備する。
console.log("test");
ビルドしてみる
vscodeからビルドをする。
jsファイルが生成された
ビルドが正常に終了するとindex.jsファイルがディレクトリ直下に生成される。
最後に
ここで実行した内容は単純にts→jsを体験してみようという内容になっています。
そのため実際の開発では、ディレクトリ直下のtsファイルを全部読んで、ディレクトリ直下にjsファイルを生成する。
なんて乱暴なことはないので、srcディレクトリ以下にtsファイルを管理して、assetsなりbuildなりのディレクトリに使用するjsファイルを生成する。
なんて流れになると思います。
また、jQueryを使用するためにjquery用の型定義ファイルであるindex.d.tsを追加する。ということも往々にしてあると思います。
次はもっと開発に沿った内容でまとめたいと思います。