ts-resetはTypeScript開発に欠かせないライブラリ

2024/09/03に公開

現在、TypeScriptはフロントエンド開発の標準言語と言えるでしょう。しかし、TypeScriptの型チェックも万能ではなく、時には理解しがたいエラーが発生することがあります。

例えば、最も一般的な問題の一つ、JSONの扱いについて:

fetch('/')
  .then((res) => res.json())
  .then((json) => {
    console.log(json) // any
  })

または:

const str = ...
const result = JSON.parse(str) // any

実際、これは安全ではありません。なぜなら、JSON.parseの戻り値の型がanyであるため、型チェックが完全にスキップされてしまうからです。

ここで、ts-resetライブラリを導入してみましょう:

npm i -D @total-typescript/ts-reset

プロジェクトのエントリーポイントにreset.d.tsファイルを新規作成し、以下の内容を記述します:

// Do not add any other lines of code to this file!
import "@total-typescript/ts-reset";

これで、プロジェクト内でts-resetを使用できるようになります。

fetch('/')
  .then((res) => res.json())
  .then((json) => {
    console.log(json) // unknown
  })

const str = ...
const result = JSON.parse(str) // unknown

これにより、resultに対して正常に型チェックを行うことができるようになります。

ts-resetは他にも多くの便利な型チェックを提供しています。例えば:

// BEFORE
const filteredArray = [1, 2, undefined].filter(Boolean) // (number | undefined)[]

// AFTER
import '@total-typescript/ts-reset/filter-boolean'

const filteredArray = [1, 2, undefined].filter(Boolean) // number[]

このような型変換は、一般的な直感により合致しています。プロジェクトの保守性を向上させるのに非常に役立つと考えられます。

Discussion