feat(ts): provide type checking through fork-ts-checker-webpack-plugin (#4611)

package.json

@@ -49,6 +49,7 @@
     "esm": "^3.0.84",
     "express": "^4.16.4",
     "finalhandler": "^1.1.1",
+    "fork-ts-checker-webpack-plugin": "^0.5.2",
     "fs-extra": "^7.0.1",
     "get-port": "^4.1.0",
     "glob": "^7.1.3",
@@ -75,6 +76,7 @@
     "rollup-plugin-replace": "^2.1.0",
     "sort-package-json": "^1.17.1",
     "ts-loader": "^5.3.2",
+    "tslint": "^5.12.0",
     "typescript": "^3.2.2",
     "vue-jest": "^3.0.2",
     "vue-property-decorator": "^7.2.0"

packages/config/src/config/build.js

@@ -53,6 +53,7 @@ export default () => ({
     },
     vueStyle: {}
   },
+  useForkTsChecker: false,
   styleResources: {},
   plugins: [],
   terser: {},

packages/webpack/src/config/client.js

@@ -1,4 +1,6 @@
 import path from 'path'
+import fs from 'fs'
+import consola from 'consola'
 import webpack from 'webpack'
 import HTMLPlugin from 'html-webpack-plugin'
 import BundleAnalyzer from 'webpack-bundle-analyzer'
@@ -132,6 +134,24 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
       }))
     }
 
+    // TypeScript type checker
+    // Only performs once per client compilation and only if `ts-loader` checker is not used (transpileOnly: true)
+    if (this.loaders.ts.transpileOnly && this.options.build.useForkTsChecker) {
+      const forkTsCheckerResolvedPath = this.nuxt.resolver.resolveModule('fork-ts-checker-webpack-plugin')
+      if (forkTsCheckerResolvedPath) {
+        const ForkTsCheckerWebpackPlugin = require(forkTsCheckerResolvedPath)
+        plugins.push(new ForkTsCheckerWebpackPlugin(Object.assign({
+          vue: true,
+          tsconfig: path.resolve(this.options.rootDir, 'tsconfig.json'),
+          // https://github.com/Realytics/fork-ts-checker-webpack-plugin#options - tslint: boolean | string - So we set it false if file not found
+          tslint: (tslintPath => fs.existsSync(tslintPath) && tslintPath)(path.resolve(this.options.rootDir, 'tslint.json')),
+          formatter: 'codeframe'
+        }, this.options.build.useForkTsChecker)))
+      } else {
+        consola.warn('You need to install `fork-ts-checker-webpack-plugin` as devDependency to enable TypeScript type checking !')
+      }
+    }
+
     return plugins
   }
 

test/fixtures/typescript-custom/modules/typescript.js

@@ -1,9 +1,13 @@
+import path from 'path'
+import consola from 'consola'
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
+
 export default function typeScriptModule() {
   // Add .ts extension for store, middleware and more
   this.nuxt.options.extensions.push('ts')
 
   // Extend build
-  this.extendBuild((config) => {
+  this.extendBuild((config, { isClient }) => {
     // Add TypeScript loader
     config.module.rules.push({
       test: /\.ts$/,
@@ -15,5 +19,14 @@ export default function typeScriptModule() {
     })
     // Add .ts extension in webpack resolve
     config.resolve.extensions.push('.ts')
+
+    if (isClient) {
+      config.plugins.push(new ForkTsCheckerWebpackPlugin({
+        vue: true,
+        tsconfig: path.resolve(this.options.srcDir, 'tsconfig.json'),
+        tslint: false,
+        logger: consola
+      }))
+    }
   })
 }

test/fixtures/typescript-custom/tsconfig.json

@@ -9,7 +9,7 @@
     "allowJs": true,
     "sourceMap": true,
     "strict": true,
-    "noImplicitAny": true,
+    "noImplicitAny": false,
     "noEmit": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

test/fixtures/typescript/nuxt.config.js

@@ -1,3 +1,10 @@
+import consola from 'consola'
+
 export default {
+  build: {
+    useForkTsChecker: {
+      logger: consola
+    }
+  },
   plugins: ['~/plugins/plugin']
 }

test/fixtures/typescript/tsconfig.json

@@ -10,13 +10,16 @@
     "jsx": "preserve",
     "sourceMap": true,
     "strict": true,
-    "noImplicitAny": true,
+    "noImplicitAny": false,
     "noEmit": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "baseUrl": ".",
     "paths": {
       "~/*": ["./*"]
-    }
+    },
+    "types": [
+      "@nuxt/vue-app"
+    ]
   }
 }

yarn.lock

@@ -2015,7 +2015,7 @@ aws4@^1.8.0:
   resolved "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
-babel-code-frame@^6.26.0:
+babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
   integrity sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=
@@ -2505,7 +2505,7 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-builtin-modules@^1.0.0:
+builtin-modules@^1.0.0, builtin-modules@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
   integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=
@@ -2974,7 +2974,7 @@ commander@2.17.x, commander@~2.17.1:
   resolved "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
-commander@^2.18.0, commander@^2.19.0:
+commander@^2.12.1, commander@^2.18.0, commander@^2.19.0:
   version "2.19.0"
   resolved "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
@@ -4896,6 +4896,18 @@ forever-agent@~0.6.1:
   resolved "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
+fork-ts-checker-webpack-plugin@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-0.5.2.tgz#a73b3630bd0a69409a6e4824e54c03a62fe82d8f"
+  integrity sha512-a5IG+xXyKnpruI0CP/anyRLAoxWtp3lzdG6flxicANnoSzz64b12dJ7ASAVRrI2OaWwZR2JyBaMHFQqInhWhIw==
+  dependencies:
+    babel-code-frame "^6.22.0"
+    chalk "^2.4.1"
+    chokidar "^2.0.4"
+    micromatch "^3.1.10"
+    minimatch "^3.0.4"
+    tapable "^1.0.0"
+
 form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -10976,11 +10988,36 @@ tsconfig@^7.0.0:
     strip-bom "^3.0.0"
     strip-json-comments "^2.0.0"
 
-tslib@^1.9.0:
+tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
   integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
 
+tslint@^5.12.0:
+  version "5.12.0"
+  resolved "https://registry.npmjs.org/tslint/-/tslint-5.12.0.tgz#47f2dba291ed3d580752d109866fb640768fca36"
+  integrity sha512-CKEcH1MHUBhoV43SA/Jmy1l24HJJgI0eyLbBNSRyFlsQvb9v6Zdq+Nz2vEOH00nC5SUx4SneJ59PZUS/ARcokQ==
+  dependencies:
+    babel-code-frame "^6.22.0"
+    builtin-modules "^1.1.1"
+    chalk "^2.3.0"
+    commander "^2.12.1"
+    diff "^3.2.0"
+    glob "^7.1.1"
+    js-yaml "^3.7.0"
+    minimatch "^3.0.4"
+    resolve "^1.3.2"
+    semver "^5.3.0"
+    tslib "^1.8.0"
+    tsutils "^2.27.2"
+
+tsutils@^2.27.2:
+  version "2.29.0"
+  resolved "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz#32b488501467acbedd4b85498673a0812aca0b99"
+  integrity sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==
+  dependencies:
+    tslib "^1.8.1"
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"