强类型的好处网上有很多，就可以直接参照了。
有现有配好的方式：
# vue + typescript 项目起手式
记录一下在配置过程中发现的问题：
现在使用 vue-cli 的模板，安装 ts-loader 的时候，安装的是最新版本，但是在 vue 下载的模板中是不支持的，如果需要支持，需要更新 webpack 版本。在安装 ts-loader 的时候，修改版本，为 3.5.0 的版本就好了。
还有一个就是所有的参数都必须有类型，比如下面的代码我不写它是字符串的话，ts 是识别不了的，就不会在页面上打印出来。
使用后是这样子：
<script lang="ts">
import { Vue, Component, Emit } from "vue-property-decorator";
@Component
export default class HelloWorld extends Vue {
msg: String = "Welcome to Your Vue.js App"
@Emit()
getinfo(){
console.log(this)
}
created () {
this.getinfo()
}
}
</script>
下面简单介绍一下装饰器：用于类式 Vue 组件的 ECMAScript / TypeScript 装饰器
vue-class-component
如果你使用 Babel，则需要 babel-plugin-transform-decorators-legacy。如果使用 TypeScript，请启用--experimentalDecorators标志。
注意：
-
methods可以直接声明为类成员方法。 - 可以将计算属性声明为类属性访问器。
- Initial
data可以声明为类属性（如果使用Babel，则需要babel-plugin-transform-class-properties）。 -
data，render并且所有Vue生命周期钩子也可以直接声明为类成员方法，但是您不能在实例本身上调用它们。声明自定义方法时，应避免使用这些保留名称。 - 对于所有其他选项，将它们传递给装饰器函数。
例子：
<template lang="pug">
div
input (v-model="msg")
p prop: {{propMessage}}
p msg: {{msg}}
p helloMsg: {{helloMsg}}
p computed msg: {{computedMsg}}
button (@click="greet") Greet
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component({
props: {
propMessage: String
}
})
export default class App extends Vue {
// 原来的data中的数据
msg = 123
// 使用 props 中的数据
helloMsg = 'Hello, ' + this.propMessage
// 然后就是vue的生命周期
mounted () {
this.greet()
}
// 计算属性computed
get computedMsg () {
return 'computed ' + this.msg
}
// 方法 method
greet () {
alert('greeting: ' + this.msg)
}
}
</script>
