TypeScriptミニマム実行環境構築

JavaScriptの型付けは動的に行われているので、暗黙の型変換や型の認識（Truthy / Falsy）などが行われてしまう。 そこで必要なのが、JavaScriptのスーパーセット（Superset）であるTypeScriptによる静的型付けである。

ParcelによるTypeScript実行環境の構築

TypeScriptもまたWebpackなどを利用して導入することができるが、ここではConfiguration要らずで気軽に使えるParcelを導入する。

parcel-bundler, typescript のインストール

global

npm i -g parcel-bundler

# yarnの場合
yarn global add parcel-bundler

local

npm i typescript

# yarnの場合
yarn add typescript

フォルダ構成

とてもシンプルに、次のようなフォルダ構成とする。

.
├── index.html
└── index.ts

parcel コマンドの実行

parcel index.html

これによりTypeScriptのコンパイルが行われ、 node_modules, package.json, package-lock.json が自動で追加される。 （これはparcelのパッケージ自動追加機能によるもの）

いちいち上記コマンドを書くのは面倒なので、 package.json に書いておく。

{
  "scripts": {
    "start": "parcel index.html"
  },
  "devDependencies": {
    "typescript": "^3.5.1"
  }
}

基本的な型一覧を index.ts に書いてみる。

const isOpen: boolean = false;
const personName: string = 'Sungjoon'; // nameにするとwindow由来のブロックスコープエラーが出るので注意
const myAge: number = 30;

const list: number[] = [0, 1, 2];
const me: [string, number, boolean] = ['Sungjoon', 30, true];

enum Job {
  WebDev,
  WebDesigner,
  PM
}
const job: Job = Job.WebDev;

const phone: any = 'Pixel';
const tablet: never = 3; // Typeエラーになる

VSCodeの場合、ここまでの時点でProblemsタブにTypeエラーが表示される。

しかしながら、さらに便利にするためにコンパイル時にも型チェックを行えるようにする。 あとは parcel-bundler も devDependencies の方に記述する。

npm i -D parcel-bundler @flaviut/parcel-plugin-typescript

これで、コンパイル時にTerminalの方にもエラーが出ることが確認できる。

🚨  /Users/sungjoon/Sites/ts-lut/index.ts(16,7)
Type '3' is not assignable to type 'never'.
    15 | const phone: any = 'Pixel';
  > 16 | const tablet: never = 3; // エラーになる
       |       ^^^^^^
    17 |