vue + ts写法

最新推荐文章于 2025-04-05 14:13:09 发布

前端烂笔头

最新推荐文章于 2025-04-05 14:13:09 发布

阅读量1.3k

点赞数 1

分类专栏： Vue ts

本文链接：https://blog.youkuaiyun.com/qq_45846359/article/details/117815213

版权

Vue 同时被 2 个专栏收录

26 篇文章

订阅专栏

1 篇文章

订阅专栏

本文探讨了如何结合Vue.js和TypeScript进行前端开发，从传统JavaScript语法过渡到使用TypeScript的优势，包括类型检查和更好的代码组织。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

传统写法

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