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; }
型情報がしっかり提供されていて驚いた。