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

关于如何在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的提问。

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