前言：
今天学习了一下typescript，typescript是javascript的一个超类，意思就是对于javascript进行内容扩展，javascript是一门弱类型语言，而typescript在我认为，就是把javascript扩展成一门强类型，就比如java，因为自己前面也学过java，所以就感觉跟java的特点一模一样，感觉就是把java的那一套，用在了javascript上，所以上手很快，感觉网上关于vue+typescirpt的资料比较简便，所以自己写一份，留给以后做参考，希望给刚入手的人有点帮助。
1.创建vue-cli3.0项目
详细看另一篇文章 [手把手搭建vue-cli3.0项目](https://blog.csdn.net/yuanqi3131/article/details/97128951)
值得注意的是，在创建的时候，选择typescript，这里也选中的vue-route，vuex，然后一路回车，即可创建项目
创建完成之后，使用如下命令就可以将项目运行
npm run serve
2.观察目录结构
如上图：
1）其中以往的main.js已经改成了main.ts
2）shims-vue.d.ts 为typescript的声明文件，让typescript可以识别以.vue后缀结尾的文件
3) shims-tsx.d.ts具体不知道，看内容是声明了一个global 用了一个命名空间jsx，猜测与JSX模板有关，以后在研究。
4）多了一个tsconfig.json 配置文件，具体配置参照
其中看componenets下有个HelloWorld.vue,核心代码
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
}
</script>
上面代码的意思是指 HelloWorld是一个组件 引用vue-property-decorator插件里面的@Component，（java中的@xxx称之为注解） @Prop() 代表 msg从父组件传入的值，而且是private私有的，外部无法访问，上面的代码等价于没有使用typescript的vue-cli项目：
<script>
export default {
prop: {
msg: {
type: String
}
}
}
</script>
这里typescript就体现出它的意思，使用@component显示标注这是一个组件，而后者并没有说明。
而App.vue代码如下，引入HelloWolrd组件，使用@Component 注册组件。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';
@Component({
components: {
HelloWorld,
},
})
export default class App extends Vue {}
</script>
<style lang="scss">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
注意点：使用typescript要在script标签里写 lang="ts"
3.开始编写demo
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<div>{{he}}</div>
<div>{{msg}}</div>
<div>{{num}}</div>
<div>{{setValue}}</div>
<button @click="addNum">增加</button>
<button @click="submitValue">传递</button>
</div>
</template>
<script lang='ts'>
// @ is an alias to /src
import { Component,Vue,Watch,Emit } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue';
@Component
export default class Home extends Vue {
private he = '123';
private msg: string = 'hello world';
private num: number = 0;
/*上面三行相当于
data() {
return {
he: '123',
msg: 'hello world',
num: 0
}
}
*/
addNum(): number {
return this.num++;
}
/**
* addNum() 相当于
* methods: {
addNum(): number {
return this.num++;
}
}
*/
get setValue(): string { // get相当于 computed
return 'user' + this.num;
}
/**
* @Watch('num') 相当于
* watch: {
handler(newVal,oldVal) {
}
}
*/
@Watch('num')
valueChange(newVal:any,oldVal?:any) {
console.log(newVal);
}
/*
@Emit 相当于 this.$emit('sumbit',value)
下方的@Emit('sumbit')中的submit为父组件调用
这里假设有父组件 parent
<parent @submit='xxx'></parent>
下方submitValue为子组件触发方法名
*/
@Emit('sumbit')
submitValue(val:any) {
}
}
</script>
好了，上述demo已经讲述了在vue-cli3.0怎么使用，对了，还有一个注意点是
@Component
export default class Home extends Vue {}
要加上@Component，要不能下面定义的方法 data，get会报错的
全部demo已经放在git，传送门，如果认为有用的话，请点个star，万分感谢！
