Vue 使用TypeScript

最新推荐文章于 2025-02-26 14:47:02 发布

BradyCC

最新推荐文章于 2025-02-26 14:47:02 发布

阅读量193

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/BradyCC/article/details/102615343

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍如何在Vue.js项目中使用TypeScript进行静态类型检查，包括数据属性、Props、Vuex状态管理、组件生命周期钩子及计算属性的类型定义。通过实际代码示例，展示TypeScript如何增强代码的可读性和维护性。

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

typescript 提供了类型声明，做静态类型检查，类型就是最好的注释。

<template>
  <div id="demo">
    <input type="text" v-model="msg" />
    <p>msg: {{ msg }}</p>
    <p>computedMsg: {{ computedMsg }}</p>
    <button @click="greet">Greet</button>
    <p>{{ login }}</p>
    <button @click="changeState">change state</button>
  </div>
</template>

<script lang="ts">
  import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from "vue-property-decorator";
  import { State, Getter, Action, Mutation, namespace } from "vuex-class";

  @Component
  export default class Demo extends Vue {
    // data
    public msg: string = "Hello World";
    // props
    @Prop() private name!: string;

    // store
    @namespace("basic").State((state: any) => state.sexMenu) private sexMenu!: any;
    @State("basic") private basic!: any;
    @namespace("basic").Action("getHouseList") private getHouseList!: any;

    @State private login!: boolean;
    @Action private toggleLogin!: any;

    // watch
    @Watch("msg")
    public onMsgChanged(val: string, oldVal: string): string {
      return val;
    }

    // mounted
    public mounted(): void {
      this.greet();
    }

    // computed
    get computedMsg(): string {
      return `computed: ${this.msg}`;
    }

    // methods
    public greet(): void {
      console.log(`greeting: ${this.msg}`);
    }
    public changeState(): void {
      this.toggleLogin();
    }
  }
</script>

<style scoped lang="scss">
  #demo {
    line-height: 24px;
  }
</style>