Add support for native TypeScript (#979)

* Add TS compilation to build

* Add linting to TypeScript files

* Configure jest for TypeScript

* Suppress TS warning about require

* Fix ESLint TypeScript errors

* Format files with prettier

.babelrc

@@ -9,7 +9,8 @@
               "node": "current"
             }
           }
-        ]
+        ],
+        "@babel/preset-typescript"
       ]
     }
   }

.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
     parser: '@typescript-eslint/parser',
   },
   extends: [
+    'plugin:@typescript-eslint/recommended',
     'eslint:recommended',
     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
@@ -17,7 +18,7 @@ module.exports = {
     'plugin:@intlify/vue-i18n/recommended',
   ],
   // required to lint *.vue files
-  plugins: ['vue', 'vuejs-accessibility', 'unicorn'],
+  plugins: ['@typescript-eslint', 'vue', 'vuejs-accessibility', 'unicorn'],
   // add your custom rules here
   rules: {
     semi: [2, 'never'],
@@ -71,6 +72,8 @@ module.exports = {
       },
     ],
     'unicorn/filename-case': ['error', { case: 'kebabCase' }],
+    '@typescript-eslint/ban-ts-comment': ['warn'],
+    '@typescript-eslint/no-var-requires': ['warn'],
   },
   settings: {
     'vue-i18n': {

.pnpmfile.cjs

@@ -0,0 +1,21 @@
+const packageJson = require('./package.json')
+
+function readPackage(pkg, context) {
+  if (pkg.dependencies.typescript) {
+    pkg.dependencies = {
+      ...pkg.dependencies,
+      typescript: packageJson.devDependencies.typescript,
+    }
+    context.log(
+      `typescript@${pkg.dependencies.typescript} => typescript@${packageJson.devDependencies.typescript} in dependencies of ${pkg.name}`
+    )
+  }
+
+  return pkg
+}
+
+module.exports = {
+  hooks: {
+    readPackage,
+  },
+}

jest.config.js

@@ -4,7 +4,7 @@ module.exports = {
       experimentalCSSCompile: false,
     },
   },
-  moduleFileExtensions: ['js', 'vue', 'json'],
+  moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
     '^~/(.*.svg)\\?inline$': '<rootDir>/src/$1',
@@ -15,7 +15,7 @@ module.exports = {
   setupFiles: ['<rootDir>/test/unit/setup.js'],
   setupFilesAfterEnv: ['<rootDir>/test/unit/setup-after-env.js'],
   transform: {
-    '^.+\\.js$': 'babel-jest',
+    '^.+\\.(j|t)s$': 'babel-jest',
     '.*\\.(vue)$': 'vue-jest',
     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
       'jest-transform-stub',
@@ -27,6 +27,7 @@ module.exports = {
   collectCoverageFrom: [
     '<rootDir>/src/**/*.vue',
     '<rootDir>/src/**/*.js',
+    '<rootDir>/src/**/*.ts',
     '!<rootDir>/src/**/*.stories.js',
   ],
 }

nuxt.config.js

@@ -136,6 +136,7 @@ export default {
   env,
   dev,
   buildModules: [
+    '@nuxt/typescript-build',
     '@nuxtjs/composition-api/module',
     '@nuxt/postcss8',
     '@nuxtjs/style-resources',

package.json

@@ -83,9 +83,11 @@
     "vue-i18n": "^8.26.5"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime-corejs3": "^7.15.3",
     "@intlify/eslint-plugin-vue-i18n": "^0.11.1",
     "@nuxt/types": "^2.15.4",
+    "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/eslint-module": "^3.0.2",
     "@nuxtjs/storybook": "^4.1.1",
     "@nuxtjs/style-resources": "^1.0.0",
@@ -96,6 +98,7 @@
     "@types/express-useragent": "^1.0.2",
     "@types/jest": "^26.0.22",
     "@types/uuid": "^8.3.4",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
     "@typescript-eslint/parser": "^5.12.0",
     "@vue/test-utils": "^1.1.3",
     "autoprefixer": "^10.4.0",
@@ -119,8 +122,8 @@
     "start-server-and-test": "^1.14.0",
     "tailwindcss": "^3.0.7",
     "tailwindcss-rtl": "^0.8.0",
-    "ts-node": "^10.4.0",
-    "typescript": "^4.5.4",
+    "ts-node": "^10.5.0",
+    "typescript": "^4.5.5",
     "vue-i18n-extract": "^2.0.0",
     "vue-jest": "^3.0.7"
   },