その設定ファイルはTypeScriptで書ける

はじめに

フロントエンドでTypeScriptを使ってプログラムを書いているけど、設定ファイルはJavaScript,
というレポジトリをよく見る。別にそれでも良いと思う一方で、設定元のライブラリからTypeScriptの型定義が配布されている場合はTypeScriptにしておいた方が良いかもしれない。

サンプル

例えば、Jestである。Jestは設定ファイルとしてjest.config.jsが必要だが、もしコードベースがTypeScriptの場合はテストもTypeScriptで書くと思う。
設定ファイルだけJavaScriptというのは個人的には統一感がなくなる気がする。
幸いJestは@types/jestを提供しているので設定ファイルも型安全で書くことが可能だ。

以下は一例。Next.js v12のJest設定なので、大分簡素化しているがこんな感じで書ける。

jest.config.ts

import nextJest from 'next/jest'
import { Config } from '@jest/types'

const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig: Config.InitialOptions = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  moduleNameMapper: {
    '^src/(.*)$': '<rootDir>/src/$1',
  },
  testEnvironment: 'jest-environment-jsdom',
}

module.exports = createJestConfig(customJestConfig)

メリット

• 設定ファイルも型安全化することでタイポのようなつまらないミスをなくせる
• 入力時にIDE側がプロパティを提案することで、自分の知らない設定や機能に出会える

特に二つ目は学び的な意味があって良いと思う。
知らないプロパティ項目が浮かび上がると公式ドキュメンを確認して新しい学びを得る、というループが自分の中で生まれる。(まぁ普段からドキュメントきちっと見とけよっていう話だが)

自分の場合はもう生のJSで書くという行為が恐怖でしかないので、積極的に設定ファイルも可能な限りTypeScriptで書いていきたい。そしてTypeScriptバンザイ。