webpackとかKarmaとかの設定ファイルをTypeScriptでかく #TypeScript

構成

こんな感じの環境を作っています。

TypeScript
webpack
Jasmine
Karma

あと karma-coverage とかものせてます。

設定ファイルもTSで書きたい

設定ファイルだけJavaScriptで書くのもなんとなく癪なので、TypeScriptで型チェックしていきます。

webpack.config.ts

公式で、ちゃんとできるよ！っていうガイドを用意してくれています。
Qiitaの記事を書いてる方もいました。

ということで割愛します。実際に行った作業は以下の３つです。

ts-nodeのインストール
＠types/webpackのインストール
webpack.config.tsの作成

karma.conf.ts

こちらも公式で触れられています。

https://karma-runner.github.io/1.0/config/configuration-file.html

しかし、この公式のサンプルだと型チェックがちゃんとされていない（configがany型）
ので、その辺きちんとしていきたいところです。

configの型を明示してみる

＠types経由でkarmaの型情報を取得して、指定してみます。

npm install --save-dev @types/karma

karma.conf.ts

import { Config } from "karma";

function setConfig(config: Config): void {
    config.set({
        // 各種設定
    });
}

export default setConfig;

これで型チェックが利くようになったわけですが、
karma-webpackの webpack プロパティや、karma-coverage用の coverageReporter プロパティなどを記述すると、コンパイルエラー吐いて死にます。
これらはプラグインをインストールした状態でのみ有効になるオプションなので、まあ当たり前ですね。

config用のinterfaceを調整する

karma-coverageの方の型情報はDTにあるのでもらってきます。

npm install --save-dev @types/karma-coverage

karma-webpackの方は、DTになかったので適当に定義します。

karma.conf.ts

import * as karma from "karma";
import * as webpack from "webpack";
import * as karmaCoverage from "karma-coverage";

namespace karmaWebpack {
    export interface ConfigOptions extends karma.ConfigOptions {
        // webpack.config用の型だいたいそのまんま
        webpack: webpack.Configuration;
    }
}

これらを利用して、当プロジェクト用の設定ファイルの型を明らかにします。

karma.conf.ts

/**
 * karma-coverageとkarma-webpackを有効にした状態での設定用の型
 */
interface PluggedConfig extends karma.Config {
    set: (config: karmaCoverage.ConfigOptions & karmaWebpack.ConfigOptions);
}

configの型として指定してやります。

karma.conf.ts

function setConfig(config: PluggedConfig): void {
    config.set({
        // 各種設定
    });
}

export default setConfig;

これでオッケーなはず！

ソース

Gistに上げました。

TSLintとかの設定も入ってるので、ごちゃごちゃしていますが。

まとめ

webpackの方はかなりお手軽なので、TSで書いちゃえばいいんじゃないかと思います。

karmaは、これ、型定義をもうちょっと使いやすい感じにできる気がしますね。
そもそもkarma-webpackの定義がないのが、ひと手間増えてる理由ですし。
DefinitelyTypedにこんとりびゅーとせねば……。