Vue单文件组件TypeScript写法

最近学习TypeScript（简称ts），用vue2.6.11+TypeScript3写了一个本地记账项目，ts在vue的单文件模版中写法和传统vue单文件模版挺不一样的。在此记录一下其中的区别。

ts是js的超集，严格的js，变量定义输入输出都需要规定相应js类型。到目前vue单文件模版一共有三种方式书写。

• 传统对象写法，data() {return{}}。
• <script lang="js"> js声明写法，基本和传统写法一致，不会因为类型未定义而报错。
• <script lang="ts"> ts声明写法，也就是今天重点讨论的写法。

传统写法的vue文件与ts对比

传统写法：

<script>
    export default {
        name: 'xx',// 组件名
        components: {},// 组件

        props: {},// 父组件传递来的值

        data() { // 声明变量的位置
            return {};
        },

        watch:{},// 监听器

        computed:{}, // 计算属性

        mounted() {}, // 生命周期钩子函数

        methods: {}// 方法
    };
</script>

ts写法：

<script lang="ts">
    import {Vue, Component, Prop, Watch} from 'vue-property-decorator';// ts装饰器
    import tabs from '@/components/Tabs.vue';

    @Component({
        components: {tabs},//组件引用
    })
    export default class Money extends Vue {// ts类组件声明
        // vue-property-decorator 装饰器写法
        @Prop({ default: 'default value' }) readonly propB!: string // Prop

        // vue-property-decorator 装饰器写法
        @Watch('child')// 监听器
        onChildChanged(val: string, oldVal: string) {} // 监听器相应方法

        get recordList() {} // 得到计算属性

        set recordList(value: string) {} // 声明计算属性
            
        mounted(): void {}// 钩子函数
            
        xxxx(value: string) {}// 方法，声明传入值必须为字符串
    }
</script>

 

实际上vue的作者写了一个装饰器 vue-class-component，不过不太好用，watch监听器相关按照文档使用得不到监听的效果。

我这里推荐使用 vue-property-decorator 装饰器，这个库与vue结合的更好更易使用，vue常用的方法都能在这个库中找到对应的装饰写法。当然并不会全部都有，如果没有找到，我们还可以引用 vue-class-component 在vue作者的库中找到其余的写法。

 

补充

ts类型声明可以在src文件目录下中命名一个.d.ts结尾的ts文件，用来储存全局自定义的类型声明，ts会自动识别这个文件并作用到src目录下的所以文件，这样就不用每个文件单独做一次类型声明。

每个普通文件：

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

    @Component
    type RecordItem = {// 记录声明类型
        tags: string[];
        notes: string;
        type: string;
        amount: number;
        createdAt?: string; 
    }
    export default class Money extends Vue {
        record: RecordItem = {tags: [], notes: '', type: '-', amount: 0};
    }
</script>
 

集中在src目录下.d.ts文件声明：

文件名可任意取名，声明后，普通组件可直接使用ts类型声明，无需再另做局部声明。

// ts全局自定义类型的文件
type RecordItem = {
    tags: string[];
    notes: string;
    type: string;
    amount: number;
    createdAt?: string;
}

 

附录

vue-class-component官方文档：vue-class-component

vue-property-decorator文档：vue-property-decorator