TypeScript"だけ"を使いたいんだあッ！
背景
お仕事でTypeScriptを使う必要が出てきた為、勉強を始めました。…が、頭の良い人達は「TypeScript + 色々便利なパッケージ類」を使っている為、何がどこまでの役割を果たしているか、混乱するっ！とにかくTypeScriptだけを知りたいんだっ…！！
という、にわかエンジニアの嘆きにより、とりあえず素の状態のType Scriptを試す為の方法を記しておこうと思う。
使ったもの
・Node.js (14.0.0) + npm (6.14.4)
・Visual Studio Code (1.45)
※ npmはNode.jsに同梱されています。TypeScriptを使う上で、npmの使い方や、パッケージインストールについての理解は、必須かと思われます。まだの人は、先にそっちの理解を先にしておくと良いのでは。
※ VSCはコード書いて、ターミナルで実行できれば良いので、あれば便利だな〜ぐらい
公式サイトを確認する（※まだTypeScriptをインストールしないで！）
※ このnoteを書いている時の、TypeScriptのバージョンは「3.8.3」です。
公式サイトの「Download」を確認します。
「INSTALL」に、NPMを使ったインストール方法が書かれています。「COMPILE」には、TypeScriptからJavascriptにコンパイルする方法が書かれています。
Type Script はローカルインストールしよう
公式サイトでは「npm install -g typescript」での、グローバルインストールの方法が記載されています。（※ "-g" がグローバルインストールを示しています）
ただ、今回はお試しなので、自分のPC内の環境を汚したくないです。その為、ローカルインストールにします。Dockerなどを使えば、もっとPC内の環境をクリーンな状態に保てますが…今回は置いといます。正直、まだよくわかってないし…。
npmプロジェクトフォルダの作成と初期化
Finderでも良いので、適当な場所にフォルダを作成します。ターミナルでmkdirをッタカターンしても良いです。このフォルダが「npmのプロジェクトフォルダ」になります。今回は「TSTest」というフォルダを作成しました。
$ mkdir TSTestこのフォルダをVSCで開き、さらに「Ctrl + Shift + @」でターミナルを開きます。※ 画像の右下にターミナルが開いてます。こんな感じ。
ここでプロジェクトの初期化を実行します。
TSTest $ npm init色々と質問されますがとりあえず、エンター連打で最後まで行きます。詳しい内容を知りたければ、以下サイトが参考になります。
ここまでやって、ようやくTypeScriptをプロジェクト内にローカルインストールすることができます。ふう…。
TypeScriptをローカルインストールするぞっ！
ローカルインストールを行うには、以下のコマンドを実行します。
TSTest $ npm install --save-dev typescriptインストールが終わったら、プロジェクトフォルダ直下の「node_modulesフォルダ」の中を見てみましょう。ローカルインストールなので、ここにtypescriptがインストールされています。また、バージョン確認することで、ちゃんとインストールされたか確認できます。
TSTest $ ./node_modules/.bin/tsc --version
Version 3.8.3コンパイラオプションファイルを作ろう
色々やる前に、まずはTypeScriptのコンパイラオプションファイルを作成します。
TSTest $ ./node_modules/.bin/tsc --initこのコマンドを実行すると「tsconfig.json」ファイルが作成されます。中を見ると、色々コンパイル時の設定ができるようになっています。詳しくは以下記事を参考に…とりあえずは、何もしなくて良いです。
TSファイルを作って、コンパイルして、実行するぞ！
さて、次はTypeScriptのソースファイルである「TS」ファイルを作って実行しようと思います。じゃあどんなコードを書こうか…ということで、公式サイトの「TypeScript Tooling in 5 minutes」をやっていこうかと。
ただ、ちょっと長くなりそうなので、このnoteはここで一旦止めたいと思います。続きは以下のnoteで…
この記事が気に入ったらサポートをしてみませんか？