如何在Vue2中使用TypeScript
前言
上一篇总结中提到，在Vue2中如何继承TypeScript，那这一篇就来总结一下在Vue2中怎么玩转TS
依赖&配置
安装
当前项目环境
- node: "14.16.1",
- vue: "2.6.10",
- vue-cli："4.5.15"
执行安装命令
// 安装vue ts依赖
npm install -D typescript @vue/cli-plugin-typescript
// 安装vue-class-componen和vue-property-decorator
npm i -D vue-class-component vue-property-decorator
关于代码校验的，可以去安装eslint相关依赖和配置校验规则，这里没有弄，所以就不介绍先
添加声明文件
在src目录下添加两个ts声明文件
shims-tsx.d.ts
import Vue, { VNode } from 'vue'
declare global {
namespace JSX {
interface Element extends VNode { }
interface ElementClass extends Vue { }
interface IntrinsicElements {
[elem: string]: any;
}
}
interface Window {
__wxjs_environment: any;
WebViewJavascriptBridge: any;
_czc: any;
}
}
vue-shim.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
如果还有第三方插件需要在项目使用，可以下载对应的声明文件，如
npm install -D types/lodash
下载重启之后，如果还报错，查看引入方式时候正确，可能平时在使用JS写代码时是用ES6的引入方式import _ form 'loadsh'，在TS中配置一般是commonJS，需要书写为import * as _ from 'lodash',如果还有报错的话，在vue-shim.d.ts文件中定义模块再试试,如
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
declare module 'lodash'
添加ts配置文件
在根目录创建tsconfig.json
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"moduleResolution": "node",
"allowJs": true,
"types": [
"webpack-env"
],
"lib": [
"dom",
"es2016"
],
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"src/**/*.d.ts",
],
"exclude": [
"node_modules"
]
}
至此，就可以开始在Vue2中去使用了
vue-property-decorator
This library fully depends on vue-class-component, so please read its README before using this library.
前面我们安装的vue-property-decorator是社区出品的一个库，这个库深度依赖于官方推荐的vue-class-componen进行进一步封装的，提供了@Component，@Prop，@Watch，@Ref等操作符
使用说明
基本结构
<template>
<div id="app">
<router-view/>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class App extends Vue {
}
</script>
<style lang="scss">
</style>
script标签
// 在vue文件中使用，需要在script标签上添加属性lang=“ts”,声明使用的是ts
<script lang="ts">
</script>
生命周期函数
保持不变，只是函数之间不需要逗号分隔
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({
name: 'test'
})
export default class Test extends Vue {
created() { }
mounted() { }
};
</script>
data数据
直接使用等号即可
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({
name: 'test'
})
export default class Test extends Vue {
firstName: string = 'George'
count: number = 1
loading: boolean = false
list: any = []
};
</script>
methods方法
不需要用methods选项包裹了，直接提出来，方法之间不需要使用逗号分隔（注意不要使用生命周期的钩子的名称）
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({
name: 'test'
})
export default class Test extends Vue {
sum(x: number, y: number): number {
return x + y
}
};
</script>
@watch监听
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
@Component({
name: 'test'
})
export default class Test extends Vue {
@Watch('count')
onWatchCount(newVal: number, oldVal: number) {
console.log(newVal, oldVal)
}
@Watch('list', { deep: true, immediate: false })
onHandleList(newVal: any, oldVal: any) {
console.log(newVal, oldVal)
}
};
</script>
computed计算属性
在函数前加上get关键字即可
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({
name: 'test'
})
export default class Test extends Vue {
get computedCount(): string {
return '计算属性' + this.count
}
};
</script>
@Component()
<template>
<ChildCompont></ChildCompont>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ChildCompont from './components/ChildCompont.vue' // 引入子组件
@Component({
name: 'test', // 当前组件的name
components:{
childCompont // 子组件
}
})
export default class Test extends Vue {
}
</script>
@Prop()
// Test.vue
<template>
<ChildCompont :propName="firstName"></ChildCompont>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({
name: 'test'
})
export default class Test extends Vue {
firstName: string = 'George'
};
</script>
// ChildCompont.vue
<template>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
name: 'childCompont'
})
export default class ChildCompont extends Vue {
@Prop({
type: String,
default: 'George',
validator: (str: any): boolean => {
return str.length < 6
},
required: true
})
// Prop对象里面的配置和原来的一样，类型、默认值、校验函数和是否必须，可写可不写,按需求去写
propName!: string //!表示非空值，否则ts初始化会报错
};
</script>
@PropSync()
与 Prop 的区别是子组件可以对 props 进行更改, 并同步给父组件
// Test.vue
<template>
<ChildCompont :propCount.sync="count"></ChildCompont>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({
name: 'test'
})
export default class Test extends Vue {
count: number = 1
};
</script>
// ChildCompont.vue
<template>
<div>
<p>{{propCount}}</p>
<button @click="innerCount += 1">点击加1</button>
</div>
</template>
<script lang="ts">
import { Component, Vue, PropSync } from 'vue-property-decorator';
@Component({
name: 'childCompont'
})
export default class ChildCompont extends Vue {
@PropSync('propCount') innerCount!: number
//在改变innerCount的时候，相当于会执行this.$emit('update:count', value)
};
</script>
@Ref
@Ref 装饰器接收一个可选参数，用来指向元素或子组件的引用信息。如果没有提供这个参数，会使用装饰器后面的属性名充当参数
<template>
<div>
<el-form ref="formRef">
</el-form>
<ChildCompont ref="ChildCompontRef" :propName="firstName" :propCount.sync="count"></ChildCompont>
</div>
</template>
<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator';
import ChildCompont from './components/ChildCompont.vue'
import type { Form } from 'element-ui' // 引入类型
@Component({
name: 'test',
components: {
ChildCompont
}
})
export default class Test extends Vue {
@Ref() readonly ChildCompontRef!: ChildCompont
@Ref() readonly formRef!: Form //这时就可以使用el-from上面的方法了，有代码提示
};
</script>
@Emit
定义emit事件，参数字符串表示分发的事件名，如果没有，则使用方法名作为分发事件名：
- @Emit()不传参数,会将回调函数名的camelCase转为kebab-case，并将其作为事件名
- @Emit(name: string)，里面传递一个字符串，该字符串为要触发的事件名
<script lang="ts">
import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class ChildCompont 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)
})
}
}
</script>
相当于
<script>
export default {
data() {
return {
count: 0,
}
},
methods: {
addToCount(n) {
this.count += n
this.$emit('add-to-count', n)
},
resetCount() {
this.count = 0
this.$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)
})
},
},
}
</script>
注：如果你在写例子的时候出现错误，在tsconfig.json中加上
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true,
}
@Model
Vue组件提供model: {prop?: string, event?: string}让我们可以定制prop和event. 默认情况下，一个组件上的v-model 会把 value用作 prop且把 input用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop来达到不同的目的。使用model选项可以回避这些情况产生的冲突。
下面是Vue官网的例子
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
// 这里允许将“value”属性用于不同的目的
value: String,
// 使用“checked”作为替代“value”的prop`
checked: {
type: Number,
default: 0
}
},
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
上述代码相当于：
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
即foo双向绑定的是组件的checke, 触发双向绑定数值的事件是change
使用vue-property-decorator提供的@Model改造上面的例子
@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})
<script lang="ts">
import { Component, Vue, Model } from 'vue-property-decorator';
@Component({
name: 'test'
})
export default class Test extends Vue {
@Model('change', { type: Boolean }) checked!: boolean
}
</script>
相当于
export default {
model: {
prop: 'checked',
event: 'change',
},
props: {
checked: {
type: Boolean,
},
},
}
@模型属性还可以通过反射元数据从其类型定义中设置类型属性
@ModelSync
@ModelSync(propName: string, event?: string, options: (PropOptions | Constructor[] | Constructor) = {})
<script lang="ts">
import { Component, Vue, ModelSync } from 'vue-property-decorator';
@Component({
name: 'test'
})
export default class Test extends Vue {
@ModelSync('checked', 'change', { type: Boolean })
readonly checkedValue!: boolean
}
</script>
相当于
export default {
model: {
prop: 'checked',
event: 'change',
},
props: {
checked: {
type: Boolean,
},
},
computed: {
checkedValue: {
get() {
return this.checked
},
set(value) {
this.$emit('change', value)
},
},
},
}
@ModelSync属性还可以通过反射元数据从其类型定义中设置类型属性
这两个我都基本没有使用过，理解的不是很好，大概意思是改变原来双向绑定的方法和类型属性，相当于自定义了一个双向绑定的类型属性和方法
@VModel
@VModel(propsArgs?: PropOptions)
定义一个双向绑定的值
<script lang="ts">
import { Vue, Component, VModel } from 'vue-property-decorator'
@Component
export default class Test extends Vue {
@VModel({ type: String }) name!: string
}
</script>
暂时没有遇到使用场景，因为再Class下面定的值，已经是响应式的了，这个相当于明确写出，某个值是响应式的，可能要在遇到一些坑才能知道用途
@Provide & @Inject
父组件
<script lang="ts">
import { Component, Vue, Provide } from 'vue-property-decorator';
import ChildCompont from './components/ChildCompont.vue'
const symbol = Symbol('baz')
@Component({
name: 'test',
components: {
ChildCompont
}
})
export default class Test extends Vue {
@Provide() foo = 'foo'
@Provide('bar') baz = 'bar'
}
</script>
后代组件
<script lang="ts">
import { Component, Vue, Inject } from 'vue-property-decorator';
@Component({
name: 'childCompont'
})
export default class ChildCompont extends Vue {
@Inject() readonly foo!: string //parentFoo
@Inject('bar') readonly bar!: string // parentBar
@Inject({ from: 'optional', default: 'default' }) readonly optional!: string // default
@Inject(symbol) readonly baz!: string //undefined
}
</script>
@ProvideReactive & @InjectReactive
和@Provide And @Inject的区别是，父组件修改了提供的值，子组件是可以捕获到修改的
父组件
<script lang="ts">
import { Component, Vue, ProvideReactive } from 'vue-property-decorator';
import ChildCompont from './components/ChildCompont.vue'
const key = Symbol('key')
@Component({
name: 'test',
components: {
ChildCompont
}
})
export default class Test extends Vue {
@ProvideReactive() one = 'value1'
@ProvideReactive(key) two = 'value2''
}
</script>
后代组件
<script lang="ts">
import { Component, Vue, InjectReactive } from 'vue-property-decorator';
@Component({
name: 'childCompont'
})
export default class ChildCompont extends Vue {
@InjectReactive() one!: string //value1
@InjectReactive(key) two!: string // value2
}
</script>
@Mixins
在使用Vue进行开发时我们经常要用到混合,结合TypeScript之后我们有两种mixins的方法.
一种是vue-class-component提供的.
//定义要混合的类 mixins.ts
import Vue from 'vue';
import Component from 'vue-class-component';
@Component // 一定要用Component修饰
export default class myMixins extends Vue {
value: string = "Hello"
}
// 引入
import Component {mixins} from 'vue-class-component';
import myMixins from 'mixins.ts';
@Component
export class myComponent extends mixins(myMixins) {
// 直接extends myMinxins 也可以正常运行
created(){
console.log(this.value) // => Hello
}
}
第二种方式是在@Component中混入.
我们改造一下mixins.ts,定义vue/type/vue模块,实现Vue接口
// mixins.ts
import { Vue, Component } from 'vue-property-decorator';
declare module 'vue/types/vue' {
interface Vue {
value: string;
}
}
@Component
export default class myMixins extends Vue {
value: string = 'Hello'
}
混入
import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from '@static/js/mixins';
@Component({
mixins: [myMixins]
})
export default class myComponent extends Vue{
created(){
console.log(this.value) // => Hello
}
}
两种方式不同的是在定义mixins时,如果没有定义vue/type/vue模块, 那么在混入的时候就要继承该mixins; 如果定义vue/type/vue模块,在混入时可以在@Component中mixins直接混入.
就这么多了
结语
一个人如果有目标，但是又很懒，那真的是件很痛苦的事情！
