tsconfig.jsonでstrict: trueとするのは時期尚早だった

できるだけ厳しめ環境で書いた方がよろしかろうと、TypeScriptのトランスパイラオプションを最もstrictにしましたが、私の現時点でtsconfig.jsonで、strict: trueとするのは時期尚早でした。

  • tsconfig.jsonで、strict: trueとする
  • webpack.config.*.tsで、'path'と'webpack'をimportしているところで型定義が無いとエラーがでる
  • yarn add @types/webpack -Dとして型定義を追加する。dependenciesで@types/nodeが入る
  • @types/webpack-envと@types/nodeで、Moduleの定義がぶつかり、死ぬ。
  • @types/webpack-envは、HMRでmodule.hotを呼ぶために必要。
  • @types/webpackを抜く。yarn remove @types/webpack
  • ここでワークアラウンド二択
    • tsconfig.jsonから、strict: trueを抜く、もしくは
    • webpack.config.*.tsを、TypeScriptやめて普通のJavaScript(.js)にする。

当面の結論

@types/nodeと@types/webpack-envの激突の根本はグローバルスコープの競合のため。この解決は当事者間の折り合いを待つか、より根本解決として将来のTypeScriptでグローバルスコープの素敵ソリューションが提供されるのを期待するかというとこかなと。ワークアラウンドとして、webpack.configをJavaScriptにします。美学だけで、効能だけ考えれば無理にTypeScriptで書く必要性なかった。そして、yarn remove ts-node。tsconfig.jsonのstrict: trueはがんばって残す。

よってこの記事のタイトルは、正しくは「webpackの設定をTypeScriptにするのは時期尚早だった」。

Redux DevToolsの問題

ChromeのRedux DevToolsも、ワークアラウンド。yarn add redux-devtools-extension。

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { routerReducer as router, routerMiddleware } from 'react-router-redux';
import { History } from 'history';
import { composeWithDevTools } from 'redux-devtools-extension';

import { app } from './AppReducer';
import { pushMiddleware } from './pushMiddleware';

export default function (history: History) {
    const store = createStore(
        combineReducers({ router, app }),
        composeWithDevTools(
            applyMiddleware(
                routerMiddleware(history),
                pushMiddleware(),
            ),
        ),
    );
    if (module.hot) {
        module.hot.accept('./AppReducer.ts', () => {
            store.replaceReducer(combineReducers({
                router,
                app: require<{app: typeof app}>('./AppReducer').app },
            ));
        });
    }
    return store;
}

型情報がしっかり提供されていて驚いた。