TypeScript与Vue

本文适用于webpack 2+

TypeScript（ts-loader） ​

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

例如我们有一个TS文件：

function a(num: number){
    return num+1;
}

console.log(a(5));

function a(num: number){
    return num+1;
}

console.log(a(5));

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

module:{
    rules:[{
        test: /\.ts$/,
        loader:'ts-loader',
    }]
}

module:{
    rules:[{
        test: /\.ts$/,
        loader:'ts-loader',
    }]
}

即可。

Vue单文件组件（vue-loader） ​

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

<style>
    div{
        color:red;
    }
</style>
<template>
    <div>{{message}}</div>
</template>
<script>
import Vue from 'vue/dist/vue.esm.js';
new Vue({
    data: function(){
        return {
            message: 'hello'
        }
    }
});
</script>

<style>
    div{
        color:red;
    }
</style>
<template>
    <div>{{message}}</div>
</template>
<script>
import Vue from 'vue/dist/vue.esm.js';
new Vue({
    data: function(){
        return {
            message: 'hello'
        }
    }
});
</script>

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

TypeScript + Vue ​

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

options: {
    transpileOnly: true,
    appendTsSuffixTo: [/\.vue$/],
}

options: {
    transpileOnly: true,
    appendTsSuffixTo: [/\.vue$/],
}

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