TS看起来是大势所趋,据说vue3.0的源码都是用TS写的了,无论如何都应该学习一番TS了!
在实践中学习也不失为一种学习方式!
1. 学习之前无论如何也要先看看TypeSCript中文网
2. vue-cli 3.0 提供了开箱即用的TS环境,那就直接开始!
vue create vue-todo
3. three days later
4. 基本完成了
成果
代码样子大概是这样,和JS写出来的差别还是很大的
<template>
<div class="today">
<div class="menu" v-if="todayTodos.length !== 0 || menuIndex !== 0">
<template v-for="(menu, index) in menus">
<div @click="filterTodos(index)" :key="index" :class="['item', `${menuIndex === index ? 'active' : ''}`]">{{menu}}</div>
</template>
</div>
<transition
enter-active-class="animated fadeInLeft"
leave-active-class="animated fadeOutRight"
mode="out-in"
>
<Todos
:key="menuIndex"
:todos="todayTodos"
:emptyMsg="emptyMsg"
:type="menuIndex"
/>
</transition>
</div>
</template>
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator'
import {Action, State, Getter} from 'vuex-class'
import Todos from '../components/Todos.vue'
@Component({
components: {
Todos,
},
})
export default class Today extends Vue {
// vuex-class 代替 mapAction 等帮助函数
@State public todayTodos: any
// @Action public getTodayTodos: any
@Action public filterTodayTodos: any
// TS data 不再需要 data () { return {}}
public menus: string[] = ['全部', '已完成', '未完成']
public menuIndex: number = 0
// TS computed xuyao 需要关键字get
// get Name() {return .....}
public get emptyMsg(): string {
if (this.menuIndex === 0) {
return '这下你高兴了!今天居然无事可做!!!'
} else if (this.menuIndex === 1) {
return '你今天居然什么事都没做完!'
} else {
return '人生就该勤奋做事!!'
}
}
// TS methods 不用写 methods: {}
public async filterTodos(index: number): Promise<void> {
if (index === 1) {
await this.filterTodayTodos(true)
this.menuIndex = index
} else if (index === 2) {
await this.filterTodayTodos(false)
this.menuIndex = index
} else {
await this.filterTodayTodos()
this.menuIndex = index
}
}
// TS 生命周期函数,和原来一样的写法
public created(): void {
this.filterTodayTodos()
}
}
</script>
<style lang="less" scoped>
@import '../common/main';
.today {
.menu {
display: flex;
width: 100%;
height: 12vh;
background: @mainColor;
.item {
flex: 1;
height: 12vh;
line-height: 12vh;
font-size: 1.2rem;
box-sizing: border-box;
color: rgb(178, 185, 190);
// &:active {
// border-bottom: 3px solid #234;
// }
}
.active {
border-bottom: 3px solid rgb(78, 54, 54);
color: rgb(255, 255, 255);
}
}
}
</style>
5. 总结
1 这次实践离真正熟练还差得很遥远,但至少对强类型是有所理解了,也能感觉到TS的优势,至少代码提示比JS好太多了!
2 也遇见比较多的不适应
比如写这个notify组件
notify.js
import Vue from 'vue'
import Notification from './Notify.vue'
// const NotificationConstructor = Vue.extend(Notification)
const notify = (options) => {
if (Vue.prototype.$isServer) {
return
}
const instance = new Notification({
propsData: options,
})
instance.$mount()
document.body.appendChild(instance.$el)
// console.log(instance)
return instance
}
export default notify
如果我这里用TS,改为 notify.ts,用ts的写法。
执行 notify(options) 一定是报错的,无奈只能用js的写法,然后你用了JS,你又不得不写个notify.d.ts来声明这个东东。
至于错误原因留待自己的技术进步吧!
然后是这个 vue-chartjs
用TS的写法也是不成功的,这个只能求助大佬了
JS写法,完全没问题
<script>
import { Line, Bar, PolarArea, Radar, Doughnut, Pie } from 'vue-chartjs'
export default {
extends: Line,
props: {
chartdata: {
type: Object,
default: null,
},
options: {
type: Object,
default: null,
},
},
mounted() {
this.renderChart(this.chartdata, this.options)
},
}
</script>
TS写法,我也不知道错在何处
<script lang="ts">
import { Line, Bar } from 'vue-chartjs'
import {Prop, Component, Vue} from 'vue-property-decorator'
@Component
export default class BarChart extends Bar {
@Prop({default: null}) public chartdata!: any
@Prop({default: null}) public options!: any
public mounted() {
this.renderChart(this.chartdata, this.options)
}
}
</script>
最后github地址
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。