Minimal TypeScript support option added

meta.js

@@ -40,6 +40,11 @@ module.exports = {
         }
       ]
     },
+    "typescript": {
+      "type": "confirm",
+      "message": "Use TypeScript as default language?",
+      "default": false
+    },
     "router": {
       "type": "confirm",
       "message": "Install vue-router?"
@@ -86,7 +91,24 @@ module.exports = {
     "test/unit/**/*": "unit",
     "build/webpack.test.conf.js": "unit",
     "test/e2e/**/*": "e2e",
-    "src/router/**/*": "router"
+    "src/router/**/*": "router",
+    "tsconfig.json": "typescript"
   },
-  "completeMessage": "To get started:\n\n  {{^inPlace}}cd {{destDirName}}\n  {{/inPlace}}npm install\n  npm run dev\n\nDocumentation can be found at https://vuejs-templates.github.io/webpack"
+  "completeMessage": "To get started:\n\n  {{^inPlace}}cd {{destDirName}}\n  {{/inPlace}}npm install\n  npm run dev\n\nDocumentation can be found at https://vuejs-templates.github.io/webpack",
+  "metalsmith": function (metalsmith, opts, helpers) {
+    function renameJsSourcesToTs(files, metalsmith, done) {
+      // If typescript is enabled rename any .js files in src/ folder to .ts extension
+      if (metalsmith.metadata().typescript) {
+        Object.keys(files).forEach(filename => {
+          if (/^(src|test\\unit\\specs).*\.js$/.test(filename)) {
+          const renamed = filename.replace(/\.js$/, ".ts");
+          files[renamed] = files[filename]
+          delete files[filename]
+        }
+      })
+      }
+      done(null, files)
+    }
+    metalsmith.use(renameJsSourcesToTs)
+  }
 };

template/build/vue-loader.conf.js

@@ -15,5 +15,6 @@ module.exports = {
     source: 'src',
     img: 'src',
     image: 'xlink:href'
-  }
+  }{{#typescript}},
+  esModule: true{{/typescript}}
 }

template/build/webpack.base.conf.js

@@ -10,7 +10,7 @@ function resolve (dir) {
 
 module.exports = {
   entry: {
-    app: './src/main.js'
+    app: './src/main.{{#typescript}}ts{{else}}js{{/typescript}}'
   },
   output: {
     path: config.build.assetsRoot,
@@ -20,7 +20,7 @@ module.exports = {
       : config.dev.assetsPublicPath
   },
   resolve: {
-    extensions: ['.js', '.vue', '.json'],
+    extensions: [{{#typescript}}'.ts', {{/typescript}}'.js', '.vue', '.json'],
     alias: {
       {{#if_eq build "standalone"}}
       'vue$': 'vue/dist/vue.esm.js',
@@ -46,6 +46,15 @@ module.exports = {
         loader: 'vue-loader',
         options: vueLoaderConfig
       },
+      {{#typescript}}
+      {
+        test: /\.ts$/,
+          loader: "ts-loader",
+          options: {
+          appendTsSuffixTo: [/\.vue$/]
+        }
+      },
+      {{/typescript}}
       {
         test: /\.js$/,
         loader: 'babel-loader',

template/config/index.js

@@ -1,3 +1,4 @@
+
 'use strict'
 // Template version: 1.1.1
 // see http://vuejs-templates.github.io/webpack for documentation.

template/package.json

@@ -32,6 +32,11 @@
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
+    {{#typescript}}
+    "ts-loader": "^2.3.7",
+    "typescript": "^2.5.3",
+    "@types/mocha": "^2.2.43",
+    {{/typescript}}
     {{#lint}}
     "eslint": "^3.19.0",
     "eslint-friendly-formatter": "^3.0.0",

template/src/App.vue

@@ -9,17 +9,19 @@
   </div>
 </template>
 
-<script>
+<script{{#typescript}} lang="ts"{{/typescript}}>
+{{#typescript}}import Vue from 'vue'{{#if_eq lintConfig "airbnb"}};
+{{/if_eq}}{{/typescript}}
 {{#unless router}}
 import HelloWorld from './components/HelloWorld'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
 
 {{/unless}}
-export default {
+export default {{#typescript}}Vue.extend({{/typescript}}{
   name: 'app'{{#router}}{{#if_eq lintConfig "airbnb"}},{{/if_eq}}{{else}},
   components: {
     HelloWorld{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
   }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}{{/router}}
-}{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+}{{#typescript}}){{/typescript}}{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
 </script>
 
 <style>

template/src/components/HelloWorld.vue

@@ -20,15 +20,17 @@
   </div>
 </template>
 
-<script>
-export default {
+<script{{#typescript}} lang="ts"{{/typescript}}>
+{{#typescript}}import Vue from 'vue'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}{{/typescript}}
+
+export default {{#typescript}}Vue.extend({{/typescript}}{
   name: 'HelloWorld',
   data{{#unless_eq lintConfig "airbnb"}} {{/unless_eq}}() {
     return {
       msg: 'Welcome to Your Vue.js App'{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
     }{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
   }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
-}{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+}{{#typescript}}){{/typescript}}{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

template/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "es2015",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "lib": [
+      "dom",
+      "es5",
+      "es2015.promise"
+    ]
+  },
+  "include": [
+    "./src/**/*.ts"
+  ]
+}