2019年6月26日

TypeScript入門

TypeScriptを使って、モダンな記述で書かれたJavaScriptを古い記述に変換(トランスパイル)する。

TypeScriptとは

TypeScript(タイプスクリプト)は、JavaScriptの拡張版。いわゆるスーパーセット。

モダンなJavaScriptを用意

Babelを試した時のファイルをそのまま使う。拡張子は.tsで保存(たとえばsample.ts)。

const f = (hoge, fuga) => {
  return hoge + fuga;
};

const a = 1;
const b = 2;

console.log(f(a, b));

TypeScriptをインストール

プロジェクトフォルダ(たとえばtypescript-test)を任意の場所に作って移動。

cd フォルダをドラッグ&ドロップ

フォルダを以下のように構成し、

typescript-test
└── dev
    └── js
        └── sample.ts

簡易初期化。

npm init -y

インストール。

npm i -D typescript

tsconfig.jsonの作成。

npx tsc --init

tsconfig.jsonを以下のように編集。

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "outDir": "./dist",
    "rootDir": "./dev",
    "strict": true,
    "esModuleInterop": true
  }
}

ビルド。

npx tsc

以下のようなエラーが出るので、

Parameter 'hoge' implicitly has an 'any' type.
Parameter 'fuga' implicitly has an 'any' type.

tsファイルを以下のように書き換え。

const f = (hoge: any, fuga: any) => {
  return hoge + fuga;
};

const a = 1;
const b = 2;

console.log(f(a, b));

再度tscコマンドを実行して、「dist」にJavaScriptファイルが生成されれば成功。