前言:
今天学习了一下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会报错的