关于如何在vue中使用typescript(第一天)

关于如何在vue中使用typescript(第一天)

环境

• Vue2
• Typescript

创建项目

vue create demo 
1

目录介绍

基本介绍

使用

开始前我们先来了解一下在 vue 中使用 typescript 非常好用的几个库

vue-class-component

vue-class-component是一个 Class Decorator,也就是类的装饰器

vue-property-decorator

vue-property-decorator是基于 vue 组织里 vue-class-component 所做的拓展import { Vue, Component, Inject, Provide, Prop, Model, Watch, Emit, Mixins } from ‘vue-property-decorator’

vuex-module-decorators

用 typescript 写 vuex 很好用的一个库import { Module, VuexModule, Mutation, Action, MutationAction, getModule } from ‘vuex-module-decorators’

组件声明

ts版

js版

data 对象

ts版

• !: 表示一定存在，?: 表示可能不存在。这两种在语法上叫赋值断言
• public表示外部ts可调用
• private只能在当前ts使用
• protected表示继承类可使用

js版

props 对象

ts版

js版

method

ts版

js版

watch

ts版

@Watch(‘arr’, { immediate: true, deep: true }) onArrChanged(newValue: number[], oldValue: number[]) {}

js版

computed 计算属性

ts版

 
 
1
2
3
4
5
6
7
8
9
10
11

js版

 
 
1
2
3
4
5

emit 事件

Ts

import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {count = 0@Emit()addToCount(n: number) {this.count += n}@Emit('reset')resetCount() {this.count = 0}@Emit()returnValue() {return 10}@Emit()onInputChange(e) {return e.target.value}@Emit()promise() {return new Promise(resolve => {setTimeout(() => {resolve(20)}, 0)})}
} 
1
2
3
4

JS

export default {data() {return {count: 0}},methods: {addToCount(n) {this.count += nthis.$emit('add-to-count', n)},resetCount() {this.count = 0this.$emit('reset')},returnValue() {this.$emit('return-value', 10)},onInputChange(e) {this.$emit('on-input-change', e.target.value, e)},promise() {const promise = new Promise(resolve => {setTimeout(() => {resolve(20)}, 0)})promise.then(value => {this.$emit('promise', value)})}}
 } 
1
2

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享