js转变到ts

www.cnblogs.com/wenxinsj/p/… 参考

1.默认写法

import Vue from 'vue'
import {Component} from 'vue-property-decorator'
//引入装饰器

@Component({
    components:{tags,types,numberpad}
})//必须写,不论放组件进去

export default XXX extends Vue{
    type = true;

@Prop(Number)xxx:number|undefined;
//@Prop 告诉vue xxx不是data而是prop
//Number 告诉vue xxx运行时是个Number
//xxx 属性名
//number|undefined 告诉vue xxx编译时的类型

    seleteType(a:boolean){
        console.log("切换");
        this.type = a;
    }
}
}

贴一段自己写的做参考

<template>
    <div class="types">
        <div class = "type" :class = " {'selected': type === '-'} " @click="selectType('-')">支出</div>
        <div class = "type" :class = " {'selected': type === '+'}" @click="selectType('+')">收入</div>
    </div>
</template>

<script lang='ts'>
import Vue from 'vue'
import {Component,Prop} from 'vue-property-decorator'

@Component
export default class Types extends Vue{
    type = '-';

    selectType(type:string)
    {
        if(type!== '+' && type !=='-')
        throw new Error("type的类型出现问题")
        this.type = type;
    }
}