Chapter 04

TypeScriptの導入とライブラリの実装

manycicadas
manycicadas
2021.01.14に更新

TypeScriptのインストール

プロジェクト直下で以下のコマンドを実行し、TypeScriptをインストールします。
その後、tscコマンドを実行してtsconfig.jsonを生成します。

$ yarn add typescript --dev
$ node_modules/.bin/tsc --init

コメント等は省略しましたが、tsconfig.jsonはデフォルトでは以下になっています。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}
  • target ・・・ TypeScriptは最終的にJavaScriptにトランスパイルされるが、その際どのバージョンのJavaScriptに出力するか
  • module ・・・ モジュールの読み込み解決
  • strict ・・・ strictモード使用するかどうか
  • esModuleInterop ・・・ モジュール読み込み系の設定だが、本筋と外れて長くなるので割愛
  • skipLibCheck ・・・ 全てのライブラリの型宣言ファイルの型チェックをスキップするかどうか
  • forceConsistentCasingInFileNames ・・・ 大文字・小文字を区別してファイル参照を解決するかどうか

今回、最終的にトランスパイルを行うのはBabelなので、この段階で低いバージョンを指定する必要がないのでtargetesnext(次期バージョンなどを含む最新の機能)にします。
モジュールの読み込み方法にはいくつか種類があり、大まかにはバックエンドで用いるならcommonjs、フロントエンドならesXXXXになります。
今回はどちらにも対応しますが、ひとまずesnextにしておきます。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

ライブラリの実装

ライブラリの中身の実装を行います。
今回は以下の2ファイルを作成します。
trimES2019で追加された機能です。
後ほどトランスパイルした際にどうなるかを確かめるため、新しめの機能を使用しています。

もし自分が実装したい機能があれば、好きな実装を行ってください。

src/trim.ts

export default (value: string = '') => {
  return value.trim();
}

src.index.ts

import trim from './trim';

export {
  trim
}