Vue 使用TypeScript

灰太狼 2023-06-08 10:46 1阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 TypeScript+Vue 插件vue-property-decorator的使用

1、安装依赖 npm install vue-class-component vue-property-decorator --save-dev 首先，我们来

╰+攻爆jí腚メ/ 2023年07月18日 11:26/ 0 赞/ 1 阅读

相关 Vue中应用TypeScript

Vue-cli4 + TypeScript3.0开发项目 1、安装vue-cli4 npm install -g @vue/cli 安装完成之后可以通过vue

川长思鸟来/ 2023年06月28日 09:56/ 0 赞/ 2 阅读

相关 vue-property-decorator vue typescript写法

什么是Typescript TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法。作

偏执的太偏执、/ 2023年06月21日 07:16/ 0 赞/ 126 阅读

相关 Vue 使用TypeScript

> typescript 提供了类型声明，做静态类型检查，类型就是最好的注释。 <template> <div id="demo"> <i

灰太狼/ 2023年06月08日 10:46/ 0 赞/ 2 阅读

相关 vue typescript 使用tinymce5富文本编辑器

1.安装tinymce、tinymce ts声明文件 npm install tinymce -S npm install @types/tinymce

谁借莪１个温暖的怀抱￠/ 2023年03月14日 13:22/ 0 赞/ 18 阅读

相关 vue集成typescript

最后更新于2018-06-30，技术文具有时效性，请知悉 > 我知道你们早就想用上 vue + ts 强类型了 [还有后续 vue + typescript 进阶篇][v

今天药忘吃喽~/ 2023年02月27日 12:11/ 0 赞/ 1 阅读

相关 Vue+TypeScript使用教程-快速入门

> 目前Vue CLI已经内置了TypeScript工具支持一.使用 TypeScript 创建工程 > vue create vue-ts 选择Manually S

骑猪看日落/ 2022年10月08日 12:27/ 0 赞/ 281 阅读

相关 Vue项目如何接入Typescript

(内容同步自小邹的头条号：[沪漂程序员的生活史][Link 1]) 一、为什么要接入typescript avascript由于自身的弱类型，使用起来非常灵活。这也

￡神魔★判官ぃ/ 2022年04月12日 02:28/ 0 赞/ 646 阅读

相关如何使用 vue + typescript 编写页面（typescript简单语法篇）

在使用typescript编写项目之前，需要有一定的js【es6】基础知识。在学习ts的过程中，类比js的差异，做到基本结合。开发中除去js报错的部分，大部分会受到ts的语义

小灰灰/ 2022年03月16日 14:18/ 0 赞/ 375 阅读

相关使用typescript来写vue详细说明

说明使用vue官方的`vue-cli3`搭建的`typescript`和`vue`的开发环境安装的时候,`vue-cli3`会默认安装`vue-property-d

逃离我推掉我的手/ 2021年12月05日 16:20/ 0 赞/ 303 阅读