TypeScriptで簡易WEBアプリを作ります

自分は開発／運用のIT関連会社に勤めていてTypeScriptに触れたことがなかったのですがこの機会に覚えようと思います。

なぜTypeScriptなのか？

TypeScriptはマイクロソフトが最近作った言語です。特徴としてJavaScriptを出力するためNode.js上でも動きます。新しい言語のためNull安全など最近の流行や仕組みが入っていて色々な会社で採用されているので、覚えておいて損はないと思っています。

やること

何回かに分けてWEBアプリを作っていきます。Dockerなど利用して短縮しても良いのですが稼働環境を理解するために手動でNodeの導入などは手順として残そうと思います（後からDockerに載せ替えなどもやります）。

早速導入していきます

Nodeのインストール

今回はMacに導入しますがbrewではなく公式からバイナリをダウンロードして導入していきます。最新の安定版は16.14.0です。
nodejs.org

インストール後にバージョンを確認するコマンドを実行する。npmはnodeのパッケージマネージャーでインストールと同時に入ります。

$ which node
/usr/local/bin/node
$ node -v
v16.14.0
$ npm -v
8.3.1

開発環境のインストール_TypeScript

$ npm install -g typescript ts-node

プロジェクトの作成

以下のコマンドを実行する

npm init -y
npm install typescript

できたファイル

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "typescript": "^4.5.5"
  }
}

プログラム＋ビルド

app.tsというファイルを作りテストのプログラムを書く

console.log("Hello World!");

ビルド

$ tsc app.ts

app.jsというファイルができました

console.log("Hello World!");

TypeScriptの導入と動作確認は以上で終了です。
次回はブラウザで動くものを作成する予定です。