关于如何在vue中使用typescript(第一天)
环境
- Vue2
- Typescript
创建项目
vue create demo
目录介绍
基本介绍
使用
开始前我们先来了解一下在 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版
<template><input v-model="name">
</template>
<script> import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {firstName = 'John'lastName = 'Doe'
// Declared as computed property getterget name() {return this.firstName + ' ' + this.lastName}
// Declared as computed property setterset name(value) {const splitted = value.split(' ')this.firstName = splitted[0]this.lastName = splitted[1] || ''}
} </script>
js版
<template><el-table border :data="data" style="width: 100%;" height="400" @selection-change="selectChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="code" label="编码"></el-table-column><el-table-column prop="name" label="名称"></el-table-column></el-table>
</template>
<script> export default {name: 'hierarchy-table',props: {value: {type: Array,required: true},skipCodes: {type: Array}},data() {return {};},computed: {data() {return this.skipCodes ? this.value.filter(it => !this.skipCodes.includes(it.code)) : this.value;}},methods: {selectChange(selection) {this.$emit('selection-change', selection);}}
}; </script>
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)})}
}
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)})}}
}
最后
整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。
有需要的小伙伴,可以点击下方卡片领取,无偿分享