vue ts写法

最新推荐文章于 2024-07-24 16:02:13 发布

qq_39670012

最新推荐文章于 2024-07-24 16:02:13 发布

阅读量981

点赞数 1

本文链接：https://blog.csdn.net/qq_39670012/article/details/116155126

版权

本文详细介绍了如何在Vue.js中使用TypeScript进行组件开发，包括使用vue-property-decorator库来声明组件、属性、监听器、计算属性等，并展示了如何设置类型声明以提高代码的类型安全性。同时，还提到了全局类型声明的方法，以减少重复的类型定义。

摘要由CSDN通过智能技术生成

传统写法

<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>

补充
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>