Create React App（以下CRA）で TypeScript と言えば、
https://github.com/wmonk/create-react-app-typescript
が定番だと思います。
さて、下の通りにプロジェクトを作成して実行しました。
npm install -g create-react-app
create-react-app my-app --scripts-version=react-scripts-ts
cd my-app/
npm start
もちろんここまでは全く問題なし。早速VS Codeでプロジェクトのフォルダを開いて、アプリケーションを作り始めました。
ところが、あるタイミングでふと
console.log("hogehoge");
を入れて実行してみようと思ったところ、いきなりコンパイルエラーになってしまいました。
「Calls to 'console.log' are not allowed.」というエラーですが、これにはちょっと驚かされました。console.logを入れただけでアプリケーションが動かなくなるなんて。。。
これですが、デフォルトで設定されているTSLintのルールがめちゃくちゃ厳格なものになっているのが原因なようです。
厳格すぎてこれでは使いづらいという声も多く、GitHubのIssuesでも議論になっているようですね。
オリジナルのCRA作者のDan Abramov氏からも、「この厳しいルールはCRAを作った時の思想（初心者でもすぐに動くものを作り始められる。本当にクリティカルなもの以外はワーニングのみでエラーにはしない。）と合わないから、ゆるくした方が良いんじゃない？」 という趣旨のIssueをわざわざ上げられているぐらいです。
create-react-app-typescript リポジトリ作者のWill Monk氏によると、「最初は自分が職場で使っているルールをコピーして使っていたのだけれど、後で一般的に推奨されているプリセット（"tslint:recommended", "tslint-react"など）を使うように変更した」との事。「それでもまだルールが厳しすぎるなら、誰かがオリジナルのCRAと同等のゆるいルールの設定を作ってPRしてくれたら喜んでそれをマージするよ。」とも言っているので、彼自身は特にどうしても厳しいルールを他の人に強制する気は無いようです。
その後このIssue上で議論は進んでいるようですが、このブログ執筆時点の最新版ではまだルールの変更には至っていないようです。
さて、なにはともあれとりあえず console.log を使えるようにする方法ですが、上のIssueでも言及されているのですが、Microsoftによる下記のページにわかりやすくはっきりと記載されていました。
https://github.com/Microsoft/TypeScript-React-Starter
プロジェクトのルートフォルダにある tslint.json ファイルを下のように書き換えればOKです。(赤字を削除、青字を追加。)
{
- "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+ "extends": [],
+ "defaultSeverity": "warning",
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts"
]
}
}
これで問題なく開発が続けられるようになりました！