TypeScript与Vue

本文适用于webpack 2+

TypeScript（ts-loader）

要使用TypeScript的话，只需要将文件名后缀改成.ts，并引入ts-loader进行处理即可。

例如我们有一个TS文件：

  1. function a(num: number){
  2.     return num+1;
  3. }
  5. console.log(a(5));

只需要在webpack.config.js中配置一下（注意这是webpack 2+的配置）：

  1. module:{
  2.     rules:[{
  3.         test: /\.ts$/,
  4.         loader:'ts-loader',
  5.     }]
  6. }

即可。

Vue单文件组件（vue-loader）

Vue为我们提供了单文件组件的写法，例如下面的test.vue：

  1. <style>
  2.     div{
  3.         color:red;
  4.     }
  5. </style>
  6. <template>
  7.     <div>{{message}}</div>
  8. </template>
  9. <script>
  10. import Vue from 'vue/dist/vue.esm.js';
  11. new Vue({
  12.     data: function(){
  13.         return {
  14.             message: 'hello'
  15.         }
  16.     }
  17. });
  18. </script>

这种写法需要使用vue-loader转换成纯JS文件才可以正常在浏览器中运行。和使用ts-loader类似，只要使用vue-loader处理即可，这里就不再演示。唯一值得注意的是vue-loader会需要同时安装几个模块，如果弄不清楚的话，安装vue-loader的时候留意一下npm的输出，把需要的模块都装上就可以了。

TypeScript + Vue

基本用法就是同时加上ts-loader和vue-loader。但是ts-loader需要加上两个选项：

  1. options: {
  2.     transpileOnly: true,
  3.     appendTsSuffixTo: [/\.vue$/],
  4. }

transpileOnly的含义是指让ts-loader只做转译。什么意思呢？就是不加这个选项的话，它会把转义的结果写入到文件中，而不是在内存中由webpack来处理，这会导致后续loader无法处理ts-loader的结果。所以加上transpileOnly让它按webpack的操作来，这样后续loader就可以继续处理。

appendTsSuffixTo的含义是碰到.vue结尾的文件时，加上.ts的后缀，这样ts-loader就会去处理.vue文件中的ts代码。

另外在使用TypeScript编写Vue代码时，可能会碰到一些类型上的问题，可以参见Vue的官方文档：https://vuejs.org/v2/guide/typescript.html