feat: add typescript support using typescript-build

saofile.js

@@ -25,6 +25,16 @@ module.exports = {
       default: '{gitUser.name}',
       store: true
     },
+    {
+      name: 'language',
+      message: 'Choose programming language',
+      choices: [
+        { name: 'JavaScript', value: 'js' },
+        { name: 'TypeScript', value: 'ts' }
+      ],
+      type: 'list',
+      default: 'js'
+    },
     {
       name: 'pm',
       message: 'Choose the package manager',
@@ -72,6 +82,16 @@ module.exports = {
       ],
       default: 'none'
     },
+    {
+      name: 'runtime',
+      message: 'Choose the runtime for TypeScript',
+      type: 'list',
+      choices: [
+        { name: 'Default', value: 'none' },
+        { name: '@nuxt/typescript-runtime', value: 'ts-runtime' }
+      ],
+      when: answers => answers.language === 'ts' && answers.server === 'none'
+    },
     {
       name: 'features',
       message: 'Choose Nuxt.js modules',
@@ -123,10 +143,13 @@ module.exports = {
       choices: [
         { name: 'jsconfig.json (Recommended for VS Code)', value: 'jsconfig.json' }
       ],
-      default: []
+      default: [],
+      when: answers => answers.language === 'js'
     }
   ],
   templateData () {
+    const typescript = this.answers.language.includes('ts')
+    const tsRuntime = this.answers.runtime && this.answers.runtime.includes('ts-runtime')
     const pwa = this.answers.features.includes('pwa')
     const eslint = this.answers.linter.includes('eslint')
     const prettier = this.answers.linter.includes('prettier')
@@ -139,6 +162,8 @@ module.exports = {
     const edge = cliOptions.edge ? '-edge' : ''
 
     return {
+      typescript,
+      tsRuntime,
       pwa,
       eslint,
       prettier,
@@ -200,6 +225,7 @@ module.exports = {
           patterns: files
         })
       }
+
       actions.push({
         type: 'add',
         files: '**',
@@ -213,7 +239,8 @@ module.exports = {
       filters: {
         '_.eslintrc.js': 'linter.includes("eslint")',
         '.prettierrc': 'linter.includes("prettier")',
-        'jsconfig.json': 'devTools.includes("jsconfig.json")'
+        'jsconfig.json': 'language.includes("js") && devTools.includes("jsconfig.json")',
+        'tsconfig.json': 'language.includes("ts")'
       }
     })
 
@@ -274,5 +301,9 @@ module.exports = {
       console.log(chalk`  {bold To test:}\n`)
       console.log(chalk`${cdMsg}\t{cyan ${pmRun} test}\n`)
     }
+
+    if (this.answers.language.includes('ts')) {
+      console.log(chalk`\n  {bold For TypeScript users.} \n\n  See : https://typescript.nuxtjs.org/cookbook/components/`)
+    }
   }
 }

template/_.eslintrc.js

@@ -9,11 +9,17 @@ module.exports = {
     use: true
   },
   <%_ } _%>
+  <%_ if (!typescript) { _%>
   parserOptions: {
     parser: 'babel-eslint'
   },
+  <%_ } _%>
   extends: [
+    <%_ if (typescript) { _%>
+    '@nuxtjs/eslint-config-typescript',
+    <%_ } else {_%>
     '@nuxtjs',
+    <%_ } _%>
     <%_ if (prettier) { _%>
     'prettier',
     'prettier/vue',

template/_package.json

@@ -6,10 +6,17 @@
   "private": true,
   "scripts": {
     <%_ if (server === 'none') { _%>
+      <%_ if (tsRuntime) { _%>
+    "dev": "nuxt-ts",
+    "build": "nuxt-ts build",
+    "generate": "nuxt-ts generate",
+    "start": "nuxt-ts start",
+      <%_ } else { _%>
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate",
+      <%_ } _%>
     <%_ } else if (server === 'adonis') { _%>
     "serve:dev": "<%= pmRun %> dev",
     "dev": "nodemon --watch app --watch bootstrap --watch config --watch .env -x node server.js",
@@ -49,6 +56,9 @@
     <%_ } else { _%>
     "nuxt": "^2.0.0",
     <%_ } _%>
+    <%_ if (tsRuntime) { _%>
+    "@nuxt/typescript-runtime": "^0.1.3",
+    <%_ } _%>
     <%_ if (server !== 'none') { _%>
     "cross-env": "^5.2.0",
     <%_ } _%>
@@ -111,6 +121,9 @@
     <%_ if (server !== 'none') { _%>
     "nodemon": "^1.18.9",
     <%_ } _%>
+    <%_ if (typescript) { _%>
+    "@nuxt/typescript-build": "^0.1.11",
+    <%_ } _%>
     <%_ if (ui === 'tailwind') { _%>
     "@nuxtjs/tailwindcss": "^1.0.0",
     <%_ } else if (ui === 'vuetify') { _%>
@@ -119,8 +132,12 @@
     "framevuerk-builder": "^2.0.2",
     <%_ } _%>
     <%_ if (eslint) { _%>
+      <%_ if (typescript) { _%>
+    "@nuxtjs/eslint-config-typescript": "^0.1.2",
+      <%_ } else { _%>
     "@nuxtjs/eslint-config": "^1.0.1",
     "@nuxtjs/eslint-module": "^1.0.0",
+    <%_ } _%>
     "babel-eslint": "^10.0.1",
     "eslint": "^6.1.0",
     "eslint-plugin-nuxt": ">=0.4.2",
@@ -141,6 +158,9 @@
     "babel-jest": "^24.1.0",
     "jest": "^24.1.0",
     "vue-jest": "^4.0.0-0",
+    <%_ if (typescript) { _%>
+    "ts-jest": "^24.0.2",
+    <%_ } _%>
     <%_ } else if (test === 'ava') { _%>
     "ava": "^2.2.0",
     "babel-plugin-module-resolver": "^3.2.0",

template/frameworks/jest/jest.config.js

@@ -4,8 +4,18 @@ module.exports = {
     '^~/(.*)$': '<rootDir>/$1',
     '^vue$': 'vue/dist/vue.common.js'
   },
-  moduleFileExtensions: ['js', 'vue', 'json'],
+  moduleFileExtensions: [
+    <%_ if (typescript) { _%>
+    'ts',
+    <%_ } _%>
+    'js',
+    'vue',
+    'json'
+  ],
   transform: {
+    <%_ if (typescript) { _%>
+    "^.+\\.ts$": "ts-jest",
+    <%_ } _%>
     '^.+\\.js$': 'babel-jest',
     '.*\\.(vue)$': 'vue-jest'
   },

template/nuxt/nuxt.config.js

@@ -82,7 +82,11 @@ module.exports = {
   /*
   ** Nuxt.js dev-modules
   */
+
   buildModules: [
+    <%_ if (typescript) {_%>
+    '@nuxt/typescript-build',
+    <%_ } _%>
     <%_ if (eslint) { _%>
     // Doc: https://github.com/nuxt-community/eslint-module
     '@nuxtjs/eslint-module',
@@ -165,7 +169,12 @@ module.exports = {
     /*
     ** You can extend webpack config here
     */
+    <%_ if (eslint) { _%>
+    extend (/* config, ctx */) {
+    }
+    <%_ } else { _%>
     extend (config, ctx) {
     }
+    <%_ }_%>
   }
 }

template/nuxt/pages/index.vue

@@ -28,6 +28,18 @@
   </div>
 </template>
 
+<%_ if (typescript) { _%>
+<script lang="ts">
+import Vue from 'vue'
+import Logo from '~/components/Logo.vue'
+
+export default Vue.extend({
+  components: {
+    Logo
+  }
+})
+</script>
+<%_ } else { _%>
 <script>
 import Logo from '~/components/Logo.vue'
 
@@ -37,6 +49,7 @@ export default {
   }
 }
 </script>
+<%_ } _%>
 
 <style>
 <%_ if (ui === 'tailwind') { _%>

template/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": [
+      "esnext",
+      "esnext.asynciterable",
+      "dom"
+    ],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noEmit": true,
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./*"
+      ],
+      "@/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@types/node",
+      "@nuxt/types"
+    ]
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}