Vue与Typescript开发

最新推荐文章于 2024-03-01 09:53:15 发布
最新推荐文章于 2024-03-01 09:53:15 发布
阅读量301 收藏
点赞数
文章标签： javascript 网络 ui ViewUI
原文链接：https://juejin.im/post/5b9dbd166fb9a05d227290be
版权

语法

具体的语法请参考, vue-class-component, vue-property-decorator。下面是Vue中常见功能的class版本的语法规则。

Element—UI

Element—UI以及Muse-UI官方提供了d.ts文件, iview官方尚未提供ts的支持

import * as element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(element);
复制代码

class组件

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component
export default class TodoList extends Vue {
}
复制代码

// 引入其他组件
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import DemoData from '@/components/DemoData.vue';

@Component({
  components: {
    DemoData,
  },
})
export default class Demos extends Vue {
}
复制代码

组件生命周期


private created(): void {
  this.init();
}

private mounted(): void {
  this.init();
}
复制代码

data

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

interface Girl {
  name: string;
  age: number;
  hobbys: string[];
}

@Component
export default class DemoData extends Vue {
  private name: string = 'fangfang';
  private lover: Girl = {
    name: 'fangfang',
    age: 23,
    hobbys: ['旅行', '看书'],
  };
  private hobbys: string[] = ['旅行', '看书'];
}
复制代码

props


import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

@Component
export default class DemoProps extends Vue {
  @Prop({ default: 'fangfang', required: true }) private name!: string;
  @Prop({ default: 'loveFangFang', required: false }) private oath!: string;
}
复制代码

computed


import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

@Component
export default class DemoComputed extends Vue {
  @Prop({ default: 'yueyue' }) private boyname!: string;

  get confession() {
    return `${this.boyname}, love, fangfang`;
  }
}
复制代码

watch


import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';

@Component
export default class DemoWatch extends Vue {
  private girlName: string = 'fangfang';
  private bodyName: string = 'zhangyue';

  private created(): void {
    setTimeout(() => {
      this.bodyName = `love ${this.bodyName}`;
    }, 3000);
  }

  @Watch('bodyName')
  private onNameChange(val: string, oldVal: string): void {
    this.girlName = `${this.girlName}${val}`;
  }
}
复制代码

// 添加deep的选项
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';

interface GrilInfo {
  name: string;
  age: number;
}

interface Gril {
  info: GrilInfo;
}

@Component
export default class DemoWatch extends Vue {
  private girlName: string = 'fangfang';
  private bodyName: string = 'zhangyue';
  private girlInfo: Gril = {
    info: {
      name: 'fangfang',
      age: 23,
    },
  };

  private created(): void {
    setTimeout(() => {
      this.bodyName = `love ${this.bodyName}`;
    }, 3000);
    setTimeout(() => {
      this.girlInfo = Object.assign({}, this.girlInfo, {
        info: {
          name: 'fangfang love yueyue',
        },
      });
    }, 5000);
  }

  @Watch('bodyName')
  private onNameChange(val: string, oldVal: string): void {
    this.girlName = `${this.girlName}${val}`;
  }

  @Watch('girlInfo', { deep: true })
  private onGirlInfoChange(val: Gril, oldVal: Gril): void {
    // alert('love');
  }
}
复制代码

directives


import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component({
  directives: {
    focus: {
      inserted(el): void {
        el.focus();
      },
    },
  },
})
export default class DemoDirectives extends Vue {
}
复制代码

filters

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component({
  filters: {
    gril(value: string): string {
      return `${value}, love, yueyue`;
    },
  },
})
export default class DemoFilter extends Vue {
  private name: string = 'fangfang';
}
复制代码

emit


@Emit('change')
handleChange(n) {
}

// 等同于
this.$emit('change', n)
复制代码

// 完整的示例
// 接受事件
import Vue from 'vue';
import { Component, Emit } from 'vue-property-decorator';
import DemoEmit from './DemoEmit.vue';

@Component({
  components: {
    DemoEmit,
  },
})
export default class DemoOnEmit extends Vue {
  private content: string = '空白';

  private onChangeName(content: string): void {
    this.content = content;
  }
}

// 发送事件
import Vue from 'vue';
import { Component, Emit } from 'vue-property-decorator';

@Component
export default class DemoEmit extends Vue {
  private created(): void {
    setTimeout(() => {
      this.handleChangeName('yueyue love fangfang');
    }, 3000);
  }

  @Emit('chang-name')
  private handleChangeName(n: string): void {
    return undefined;
  }
}
复制代码

methods

  private init(): void {
    alert('init');
  }
}
复制代码

Vuex

Vuex是Vue与TypeScript结合的痛点, 我使用的解决方案是通过vuex-class, 但是vuex-class有一个缺陷，vuex-class中定义的类型, 没有办法在.vue中推导出来, 我曾经给vuex-class作者提出了一个lssues, 作者给出的建议如下, 在.vue文件中再一次声明类型。


// store
import Vue from 'vue';
import Vuex from 'vuex';
import ModuleA from './modules/moduleA';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    ModuleA,
  },
  state: {
    name: 'test',
  },
});
复制代码
// moduleA
import { Commit } from 'vuex';

interface ModuleA {
  name: string;
  hobby: string[];
}

const ModuleAState: ModuleA = {
  name: 'fangfang',
  hobby: ['看书'],
};

const getters = {
  oath(state: ModuleA): string {
    return `${state.name} love yueyue`;
  },
};

const actions = {
  addHobby({ commit }: { commit: Commit }, hobby: string) {
    commit('ADD_HOBBY', hobby);
  },
};

const mutations = {
  ADD_HOBBY(state: ModuleA, hobby: string): void {
    state.hobby = [...state.hobby, hobby];
  },
};

export default {
  namespaced: true,
  state: ModuleAState,
  getters,
  actions,
  mutations,
};
复制代码
// xxx.vue
// Vuex中类型是丢失的, 需要自己在手动写一遍
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import DemoData from '@/components/DemoData.vue';
import DemoProps from '@/components/DemoProps.vue';
import DemoComputed from '@/components/DemoComputed.vue';
import DemoWatch from '@/components/DemoWatch.vue';
import DemoDirectives from '@/components/DemoDirectives.vue';
import DemoFilter from '@/components/DemoFilter.vue';
import DemoOnEmit from '@/components/DemoOnEmit.vue';
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace,
} from 'vuex-class';

const ModuleA = namespace('ModuleA/');

@Component({
  components: {
    DemoData,
    DemoProps,
    DemoComputed,
    DemoWatch,
    DemoDirectives,
    DemoFilter,
    DemoOnEmit,
  },
})
export default class Demos extends Vue {

  @State('name') public stateName!: string;
  @ModuleA.State('name') public ModuleAStateName!: string;
  @ModuleA.Getter('oath') public ModuleAGetterOath!: string;
  @ModuleA.Action('addHobby') public ModuleAActionAddHobby!: (hobby: string) => void;
  @ModuleA.State('hobby') public ModuleAStateHobby!: string[];
  @ModuleA.Mutation('ADD_HOBBY') public ModuleAMutationAddHobby!: (hobby: string) => void;

  private created(): void {
    this.init();
  }

  private init(): void {
    // 全局的state状态
    // console.log(this.stateName);

    // 命名空间的state状态
    // console.log(this.ModuleAStateName);

    // 命名空间的getter
    // console.log(this.ModuleAGetterOath);

    // 使用dispath
    this.ModuleAActionAddHobby('456');
    // console.log(this.ModuleAStateHobby);

    // 使用commit
    this.ModuleAMutationAddHobby('1243');
    // console.log(this.ModuleAStateHobby);
  }
}
复制代码
weixin_34290352
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue之--使用TypeScript
m0_74433188的博客
04-05 2371
在基于 Vite 的配置中，开发服务器和打包器将只会对 TypeScript 文件执行语法转译，而不会执行任何类型检查，这保证了 Vite 开发服务器在使用 TypeScript 时也能始终保持飞快的速度。除了 TypeScript 文件，它还支持 Vue 的单文件组件。是官方的 VSCode 扩展，提供了 Vue 单文件组件中的 TypeScript 支持，还伴随着一些其他非常棒的特性。我们已经在 IDE 中通过单独的进程运行着类型检查了，却还要在构建流程中执行类型检查导致降低开发体验，这似乎不太划算。
Vue与TypeScript的配合：如何在Vue项目中使用TypeScript，利用静态类型提高代码的可维护性
最新发布
哎 你看的博客
06-20 981
环境搭建：介绍如何搭建 Vue 和 TypeScript 的开发环境。涵盖 webpack 的相关配置，TypeScript 的编译配置等内容。 启用 TypeScript：解释如何在 Vue 项目中启用 TypeScript，包括如何在 .vue 文件中使用 TypeScript，如何定义组件等内容。 类型声明：解释在 Vue 项目中如何进行类型声明，如何定义和使用 interface，如何为 props、data、computed 以及 methods 定义类型。 Vue 类型增强：
了解Vue
盛夏高歌的蝉
08-06 367
什么是vue实例？ new Vue(）的时候做了什么？ Vue.use()是干嘛的？
Vue框架：适用于TypeScript的JavaScript框架
与墨的编程成长历程
06-23 1911
为了让 Vue 和 TypeScript 结合得更加紧密，我们需要对 Vue 组件进行类型定义。下面是一个 Vue 组件的类型定义例子：import {props : {name : {return {} , } , });import {
【private关键字的作用及使用】
m0_48114733的博客
03-02 338
package cn.itcast.day06.demo03; /* 问题描述：定义Person的年龄时，无法阻止不合理的数值被设置进来 解决方案：用private关键字将需要保护的成员变量进行修饰 一旦使用了private进行修饰，那么本垒当中仍然可以随意访问 但是！超出了本类范围之外就不能再直接访问了 间接访问private成员变量，就是定义一对儿Getter/Setter方法 必须叫setxxx/getxxx命名规则 对于Getter来说，不能有参数，返回值类型和成员变量对应； 对于Sett.
一文入门Typrscript和Vue3
青鸠的博客
04-11 1311
TypeScript和vue3基础知识总结
vue-typescript-import-dts-TypeScript声明文件，该文件允许将'import'与.vue文件一起使用。-Vue.js开发
05-27
主要用例是捆绑程序环境，例如我们的vue-typescript-import-dts TypeScript声明文件，该文件允许将导入与* .vue文件一起使用。 主要用例是捆绑程序环境，例如webpack。 该文件本身包含4行。 这个包只是为了方便。 ...
vue_typescript-admin
10-21
【Vue TypeScript Admin】是基于Vue.js和TypeScript的现代化后台管理界面模板，旨在提供一个高效、稳定且可扩展的开发框架。Vue CLI作为Vue.js的官方脚手架，已经内置了对TypeScript的全面支持，使得开发者能够在Vue...
基于Vue+TypeScript开发的数字电路仿真软件+源码（毕业设计&课程设计&项目开发）
05-31
基于Vue+TypeScript开发的数字电路仿真软件+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于Vue+TypeScript开发的数字电路仿真软件+源码，适合毕业设计...
基于Vue+TypeScript开发的音乐视频推荐平台源码(毕设项目).zip
06-20
基于Vue+TypeScript开发的音乐视频推荐平台源码(毕设项目).zip 基于Vue+TypeScript开发的音乐视频推荐平台源码(毕设项目).zip 基于Vue+TypeScript开发的音乐视频推荐平台源码(毕设项目).zip 【资源说明】 该项目是...
TypeScript及TypeScript在vue3.0项目中的基本使用
Jeasu_0908的博客
10-08 1万+
一、 TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言，主要提供了类型系统和对 ES6的支持。它是JavaScript的一个超集，扩展了JavaScript的 语法，因此现有的 JavaScript 代码可与TypeScript 一起工作无需任何修改。 TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript可以运行在任何浏览器上。 TypeScript 是 Angular2、vue3的开发语言
Vue中自定义私有指令
weixin_45616246的博客
04-08 268
请陛下批阅 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义私有指令</title> <script src="../../vue/vue-v2.6.11.js"></script>...
vue2.x + ts 项目语法规范
情非得已小猿猿
01-19 1653
1、声明函数 private、public、protected private formStatus: string = 'create'; 2、@ 装饰器（替换钩子函数） 从vue-property-decorator引入相应的装饰器（Component, Prop, Watch…） !: 表示强制解析, 告诉ts编辑器一定有值 相关装饰器的用法 <script lang="ts"> import { Component, Prop, Watch, Vue } from "vue
Vue2+typescript写法总结
东扯葫芦西扯瓜——前端小菜鸟的博客
07-08 6048
之前不是ts写的老项目，想接入ts，首先使用vue命令安装typescript 下面依次对安装过程中出现的选项进行解释 最后这里回车过后就可以继续安装ts了。安装过程中，可能出现如下错误： ERROR Error: Cannot find module ‘@vue/cli-plugin-router/generator/template/src/views/HomeView.vue’ from ’ xxx 或者 ERROR Error: Cannot find module ‘@vue/cli-plu
Vue中使用Typescript及Typescript基础
dandan1924的博客
07-28 1503
准备工作 新建一个基于ts的vue项目 通过官方脚手架构建安装 # 1. 如果没有安装 Vue CLI 就先安装 npm install --global @vue/cli 最新的Vue CLI工具允许开发者 使用 TypeScript 集成环境 创建新项目。 只需运行vue create my-app然后选择选项，箭头键选择 Manually select features，确保选择了 TypeScript 和 Babel 选项 在已存在项目中安装typescript 在建好的vue项目中执行 vue
Vue3与TypeScript的深度结合：技术指南及实践详解
热门推荐
聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
03-01 5万+
详解： Vue 3的Composition API可以更好地与TypeScript集成，提供更准确的类型推断和严格的类型约束。setup() {// 类型化的ref// 类型化的计算属性return {state,increment在这个例子中，我们定义了一个CounterState接口来描述组件的状态模型，并使用此接口约束reactive对象。同时，通过明确指定ref和computed的类型，确保整个应用中的数据流具有严格的数据类型。
Vue3+TypeScript？看这一篇就够了
m0_67266171的博客
03-01 3218
1、TypeScript快速上手 1.1 初识 TypeScript TypeScript 的介绍 TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。 2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。它是开源和跨平台的编程语言。 TypeScript扩展了J
vue3+typescript引入外部文件
sanhuv的博客
10-14 627
引用，仅做自己参考 vue3+typescript中引入外部文件有几种方法 （eg:引入echarts） 第一种方法： 1 indext.html中用script引入 ? 1 2 <div id="app"></div> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js"></script&g...
"Vue3 TypeScript开发总结及技巧分享
安装最新的Vue脚手架和创建Vue3项目是学习Vue3 TypeScript开发的第一步，只有正确的环境配置才能保证后续开发的顺利进行。 二、进击Vue3 相比于Vue2，Vue3解决了许多Vue2的局限性，带来了更好的开发体验和更好的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值