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」を確認します。

スクリーンショット 2020-05-09 10.47.39

「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 + @」でターミナルを開きます。※ 画像の右下にターミナルが開いてます。こんな感じ。

スクリーンショット 2020-05-09 11.50.53

 ここでプロジェクトの初期化を実行します。

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で…


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
2
難しい事はわからない、にわかエンジニア。 賢い人がやらない操作をやるので、色々なところで躓く。 よく喋る猫一匹と同棲中。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。