在Vue项目中使用Typescript的实现

3.0迟迟没有发布release版本,现阶段在Vue项目中使用Typescript需要花不小的精力在工程的配置上面。主要的工作是webpack对TS,TSX的处理,以及2.x版本下面使用class的形式书写Vue 组件的一些限制和注意事项。

Webpack 配置

配置webpack对TS,TSX的支持,以便于我们在Vue项目中使用Typescript和tsx。

module.exports = {
 entry: './index.vue',
 output: { filename: 'bundle.js' },
 resolve: {
  extensions: ['.ts', '.tsx', '.vue', '.vuex']
 },
 module: {
  rules: [
   { test: /\.vue$/, loader: 'vue-loader',
    options: {
    loaders: {
     ts: 'ts-loader',
     tsx: 'babel-loader!ts-loader',
    }
    }
   },
   {
    test: /\.ts$/,
    loader: 'ts-loader',
    options: { appendTsSuffixTo: [/TS\.vue$/] }    },
   {
    test: /\.tsx$/,
    loader: 'babel-loader!ts-loader',
    options: {
     appendTsxSuffixTo: [/TSX\.vue$/]
    }
   }
  ]
 }
}

在上面的配置中,vue文件中的TS内容将会使用ts-loader处理,而TSX内容将会按照ts-loader-->babel-loader的顺序处理。

appendTsSuffixTo/appendTsxSuffixTo 配置项的意思是说,从vue文件里面分离的script的ts,tsx(取决于<script lang="xxx"></script>)内容将会被加上ts或者tsx的后缀,然后交由ts-loader解析。

我在翻看了ts-loader上关于appendTsxSuffixTo的讨论发现,ts-loader貌似对文件后缀名称有很严格的限定,必须得是ts/tsx后缀,所以得在vue-loader extract <script>中内容后,给其加上ts/tsx的后缀名,这样ts-loader才会去处理这部分的内容。

ts-loader只对tsx做语法类型检查,真正的jsx-->render函数应该交由babel处理。

所以我们还需要使用plugin-transform-vue-jsx来将vue jsx转换为真正的render函数。

// babel.config.json
{
 "presets": ["env"],
 "plugins": ["transform-vue-jsx"]
}

同时,配置TS对tsx的处理为preserve,让其只对tsx做type类型检查。

// tsconfig.json
{
 "compilerOptions": {
 "jsx": "preserve",
}

使用vue cli 4.x

高版本的vue cli如4.x已经集成了vue + typescript的配置。选择use Typescript + Use class-style component syntax选项创建工程。

创建后的工程目录如下:

在src根目录下,有两个shims.xx.d.ts的类型声明文件。

// shims.vue.d.ts
declare module "*.vue" {
 import Vue from "vue";
 export default Vue;
}
// shims.jsx.d.ts
import Vue, { VNode } from "vue";
declare global {
 namespace JSX {
  // tslint:disable no-empty-interface
  interface Element extends VNode {}
  // tslint:disable no-empty-interface
  interface ElementClass extends Vue {}
  interface IntrinsicElements {
   [elem: string]: any;
  }
 }
}

它们是作什么用的呢?

shims.vue.d.ts给所有.vue文件导出的模块声明了类型为Vue,它可以帮助IDE判断.vue文件的类型。

shims.jsx.d.ts 为 JSX 语法的全局命名空间,这是因为基于值的元素会简单的在它所在的作用域里按标识符查找。当在 tsconfig 内开启了 jsx 语法支持后,其会自动识别对应的 .tsx 结尾的文件,(也就是Vue 单文件组件中<script lang="tsx"></script>的部分)可参考

官网 tsx

基本用法

在vue 2.x中使用class的方式书写vue组件需要依靠vue-property-decorator来对vue class做转换。

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
export default class extends Vue {
 @Prop({ default: 'default msg'}) private msg!: string;
 name!: string;
 show() {
  console.log("this.name", this.name);
 }
}
</script>

导出的class是经过Vue.extend之后的VueComponent函数(理论上class就是一个Function)。

其最后的结果就像我们使用Vue.extend来扩展一个Vue组件一样。

// 创建构造器
var Profile = Vue.extend({
 template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
 data: function () {
  return {
   firstName: 'Walter',
   lastName: 'White',
   alias: 'Heisenberg'
  }
 }
})

export default {
  components: {
    Profile
  }
}

注意上面的Profile组件并不是和我们平时一样写的Vue组件是一个plain object配置对象,它其实是一个VueComponent函数。

父组件实例化子组件的时候,会对传入的vue object 进行扩展,使用Vux.extend转换为组件函数。
如果components中的值本身是一个函数,就会省略这一步。这一点, 从Vue 源码中可以看出。

if (isObject(Ctor)) {
  Ctor = baseCtor.extend(Ctor)
 }

上面的Ctor就是在components中传入的组件,对应于上面导出的Profile组件。

使用vuex

使用vuex-class中的装饰器来对类的属性做注解。

import Vue from 'vue'import Component from 'vue-class-component'import {
 State,
 Getter,
 Action,
 Mutation,
 namespace
} from 'vuex-class'

const someModule = namespace('path/to/module')

@Component
export class MyComp extends Vue {
 @State('foo') stateFoo
 @State(state => state.bar) stateBar
 @Getter('foo') getterFoo
 @Action('foo') actionFoo
 @Mutation('foo') mutationFoo
 @someModule.Getter('foo') moduleGetterFoo

 // If the argument is omitted, use the property name
 // for each state/getter/action/mutation type
 @State foo
 @Getter bar
 @Action baz
 @Mutation qux

 created () {
  this.stateFoo // -> store.state.foo
  this.stateBar // -> store.state.bar
  this.getterFoo // -> store.getters.foo
  this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
  this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
  this.moduleGetterFoo // -> store.getters['path/to/module/foo']
 }
}

mixin

对于mixin,我们使用class的继承很容易实现类似功能。

import Vue from 'vue'
import { Component } from 'vue-property-decorator'
@Component
class DeployMixin extends Vue{
 name: string;
 deploy(){
  // do something
 }
}
@Component
class Index extends DeployMixin{
 constructor(){
  super()
 }
 sure(){
  this.deploy()
 }
}

VS code jsx快捷键

设置 VS code中对emmet的支持

"emmet.includeLanguages": {
  "javascript": "html"
}

或者是

"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-12-18

在Vue组件中使用 TypeScript的方法

注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马

Vue2 Vue-cli中使用Typescript的配置详解

前言 因为最近公司的团队热衷于vue框架,新项目想着练练typescript,于是开始了vue+ts的踩坑之路...本文意在为和我有一样想法的伙伴们省去踩坑的时间,下面话不多说了,来一起看看关于Vue2 Vue-cli中利用Typescript需要的配置是什么吧. 一.初步配置 首先安装官方插件vue-class-component,vue-property-decorator,配置webpack. webpack配置如下: 修改入口文件 entry: { app: './src/main.ts

vue中typescript装饰器的使用方法超实用教程

VueConf ,尤大说, Vue 支持 Ts 了,网上关于 Vue + Ts 的资料有点少, 楼主踩了一个星期坑,终于摸明白了 修饰器 的玩法,下面我们就来玩下 Vue 的 decorator 吧 1,data 值的声明 在这里 public 声明的是公有属性, private 声明的是私有属性,私有属性要带 下划线 蓝色框里的内容是声明组件,在每个组件创建时都要带上, Components 中的写法如下 上面是 普通写法 ,下面是 懒加载写法 2.@Prop 父组件传值给子组件 父组件使用

使用Vue CLI创建typescript项目的方法

使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue create my-vue-typescript 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我们选择y 当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录 { "useTaobaoRegistry"

详解在Vue中使用TypeScript的一些思考(实践)

Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个"子类".此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是组件选项需要被包裹在 Vue.extend() 中. vue-class-component:通常与 vue-property-decorator 一起使用,提供一系列装饰器,能让我们书写类风格的 Vue 组件. 两种形式输出

Vue+Typescript中在Vue上挂载axios使用时报错问题

在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下: main.ts import Vue from 'vue' import axios from './utils/http' Vue.prototype.$axios = axios; 这样的话,我们在各个组件中进行请求时,就可以直接使用this.$axios,但是在ts中使用this.$axios进行请求时,会进行报错,如下所示: 从图中我们可以看出ts在Vue身上检测不到

使用VueCli3+TypeScript+Vuex一步步构建todoList的方法

前言 Vue3.x 即将来袭,使用 TypeScirpt 重构,TypeScript 将成为 vue 社区的标配,出于一名程序员的焦虑,决定现在 Vue2.6.x 踩一波坑. vue 官方文档已经简略地对 typescript 的支持进行了介绍,我们使用 Vue Cli3 直接生成项目 创建项目 ❓为什么使用 Vue Cli3 构建项目 官方维护,后续升级减少兼容性问题 使用以下配置进行项目的生成: Babel 对 Ts 进行转译 TSLint 对 TS 代码进行规范,后续会使用 prettie

使用typescript构建Vue应用的实现

一.Vue项目初始化-引入typescript 使用typescript构建Vue应用和使用js一样,都是通过vue-cli去初始化并创建一个vue项目,只不过使用typescript构建的时候要在脚手架问卷操作的时候勾选上typescript选项. 二.typescript Vue项目比较 使用typescript构建的Vue项目发生了一些变化: ① main.js变成了main.ts,但是main.ts中的内容和main.js的内容是一模一样的. ② router.js变成了router.t

在Vue 中使用Typescript的示例代码

Vue 中使用 typescript 什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescrip

Vue框架TypeScript装饰器使用指南小结

前言 装饰器是一种特殊类型的声明,它能够被附加到 类声明,方法, 访问符,属性或参数 上. 装饰器使用 @expression这种形式, expression求值 后必须为一个函数,它会在 运行时被调用 ,被装饰的声明信息做为参数传入. 本篇先从项目的宏观角度来总结一下Decorator如何组织. 目录 主要的Decorator依赖 vue-class-component vuex-class vue-property-decorator core-decorators 自定义Decorator

VUE中使用TypeScript装饰器实现表单验证的全过程

目录 前言 装饰器 class-validator 封装Validator 具体使用 小结 前言 最近接触了关于很多TypeScript装饰器的知识,以及class-validator这个用装饰器来做表单验证的包,就萌生了想在vue中使用装饰器来做表单验证的想法.class-validator允许我们在类上通过使用装饰器来完成表单的验证,并且可在浏览器端和node端同时使用.那么接下来先简单介绍一下装饰器和class-validator的用法. 装饰器 装饰器的语法十分简单,只需要在想使用的装饰

Vue中使用装饰器的方法详解

目录 前言 什么是装饰器? 装饰器的使用 js中使用装饰器 不使用装饰器 vue 中使用装饰器 一些常用的装饰器 1. 函数节流与防抖 2. loading 3. 确认框 总结 前言 相信各位在开发中一定遇到过二次弹框确认相关的需求.不管你使用的是UI框架的二次弹框组件,还是自己封装的弹框组件.都避免不了在多次使用时出现大量重复代码的问题.这些代码的积累导致项目的可读性差.项目的代码质量也变得很差.那么我们如何解决二次弹框代码重复的问题呢?使用装饰器 什么是装饰器? Decorator是ES7的

JS装饰者模式和TypeScript装饰器

装饰者模式介绍 装饰者模式(Decorator Pattern)也称为装饰器模式,在不改变对象自身的基础上,动态增加额外的职责.属于结构型模式的一种. 使用装饰者模式的优点:把对象核心职责和要装饰的功能分开了.非侵入式的行为修改. 举个例子来说,原本长相一般的女孩,借助美颜功能,也能拍出逆天的颜值.只要善于运用辅助的装饰功能,开启瘦脸,增大眼睛,来点磨皮后,咔嚓一拍,惊艳无比. 经过这一系列叠加的装饰,你还是你,长相不增不减,却能在镜头前增加了多重美.如果你愿意,还可以尝试不同的装饰风格,只要装

TypeScript&nbsp;装饰器定义

目录 1.概念 1.1定义 1.2装饰器工厂 1.3装饰器组合使用 1.4装饰器求值 2.类装饰器 3.方法装饰器 4.访问器装饰器 5.属性装饰器 6.参数装饰器 前言: 装饰器Decorator 在ECMAScript中已经提案,但是目前还没有定案:在TypeScript中已经将其实现,但是这仍是一项正在试验中的特性,如果想要使用装饰器,需要在tsconfig.json中将experimentalDecorators属性,将其设置为true. 1.概念 1.1定义 装饰器是一种新的声明,它可

Python装饰器用法示例小结

本文实例讲述了Python装饰器用法.分享给大家供大家参考,具体如下: 下面的程序示例了python装饰器的使用: 示例一: def outer(fun): print fun def wrapper(arg): result=fun(arg) print 'over!' return result return wrapper @outer def func1(arg): print 'func1',arg return 'very good!' response=func1('python'

Django框架CBV装饰器中间件auth模块CSRF跨站请求问题

CBV添加装饰器 给CBV添加装饰器有三种方法,三种方法都需要导入模块: from django.utils.decorators import method_decorator 第一种直接在方法上面添加: from django.utils.decorators import method_decorator class MyLogin(View): @method_decorator(auth) def get(self, request): return HttpResponse('Is

Python的@装饰器的作用小结

我们在编程过程中,常常会遇到这种需求: 比如,我想开发一款计算器,我已经写好了一堆函数,用于执行各种计算,那么我们需要在执行各种计算函数前,首先对输入的数据进行检查,确保他们必须得是数值才允许执行函数,而不能是字符串: 又如,我想编写一个用于计算三角形周长.面积.某个角角度的模块,已经写好几个函数用于计算,那么,在执行计算前,首先要确保输入的三条边长能够构成三角形,再进行计算才有意义: 再比如,我想开发某款网络应用,写了一些函数用于实现用户的某些操作,那么,得要先检查确认该用户已经登录了,才允许

Vue中jsx不完全应用指南小结

前言:文章不介绍任务背景知识,没有原理说明,偏向于实践的总结和经验分享. 文章所有的代码是基于Vue CLI 3.x版本,不会涉及到一步步通过Webpack来配置JSX所需要的知识点. 在使用Vue开发项目时绝大多数情况下都是使用模板来写HTML,但是有些时候页面复杂又存在各种条件判断来显示/隐藏和拼凑页面内容,或者页面中很多部分存在部分DOM结构一样的时候就略显捉襟见肘,会写大量重复的代码,会出现单个.vue文件过长的情况,这个时候我们就需要更多的代码控制,这时候可以使用渲染函数. 渲染函数想