既存Laravel・Vue.jsプロジェクトにTypescriptを導入した時の設定

既存プロジェクトにTypescriptを導入した際に幾つかエラーが発生して、
tsconfig.jsonの設定を調査したので、そのまとめです。
(まず既存コードが動くことを優先して導入するという方針でしたので、第一歩として設定のみで回避してます^^;
本当は原因となっているコードを修正すべきです。)

エラー１. TS7006: Parameter 'x' implicitly has an 'any' type.

関数の引数に型指定がない、というコンパイルエラー。

tsconfig.json

"noImplicitAny": false,

を追加して回避しました。
(ソース：書籍"プロを目指す人のためのTypeScript入門")

エラー2. TS2339: Property 'x' does not exist on type '~~~'.

Vue.jsのOption APIのthisを使用している箇所で発生しました。
thisの型が参照できないというコンパイルエラー。

example.vue

exampleMethod: function () {
    return this.someProperty; 
    // TS2339: Property 'someProperty' does not exist on type '~~~'.
},

tsconfig.json

"noImplicitThis": false,

を追加して回避しました。
(ソース：https://github.com/vuejs/vue/issues/8625)

エラー3. インポートされたモジュールで既定のエクスポートが宣言されていません 。TS1192: Module 'xxx' has no default export.

ライブラリ内でdefault exportを使用していない場合に発生。
外部ライブラリがあると仕方ないので、

tsconfig.json

"allowSyntheticDefaultImports": true

を追加して回避しました。
(ソース：https://qiita.com/rhirayamaaan/items/cf3d859678577ec90d7b)

エラー4. ChunkRenderError: Maximum call stack size exceeded

最も苦戦したエラー。npmビルド時に以下のエラーが発生し、app.cssがビルドできませんでした。

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ChunkRenderError: Maximum call stack size exceeded

意味的にはjavascriptコードで無限ループ等で使用している場合に発生するようですが、
なぜかapp.scssで発生。
本プロジェクトではtailwindを使用しているのですが、
原因の特定ができなかったので、
tailwindのpurgeオプションを使用しビルド対象ファイルを絞ることで回避しました。

tailwind.config.js

module.exports = {
    purge: {
        enabled:true, //  purgeするかどうか
        content:[
            'xxx'
        ],  // ここで使用しているクラスのみビルドされる
    },

プロジェクトによってエラーや対策が異なりそうなので、思ったより調査が難航しやすそうですね。
以上、ご参考になれば幸いです！