Vue-cli3项目引入Typescript的实现方法


Posted in Javascript onOctober 18, 2019

前言

假设已经有一个通过 vue-cli3 脚手架构建的 vue 项目

命令行安装 Typescript

npm install --save-dev typescript
npm install --save-dev @vue/cli-plugin-typescript

编写 Typescript 配置

根目录下新建 tsconfig.json,下面为一份配置实例(点击查看所有配置项)。值得注意的是,默认情况下,ts 只负责静态检查,即使遇到了错误,也仅仅在编译时报错,并不会中断编译,最终还是会生成一份 js 文件。如果想要在报错时终止 js 文件的生成,可以在 tsconfig.json 中配置 noEmitOnError 为 true。

{
 "compilerOptions": {
  "target": "esnext",
  "module": "esnext",
  "strict": true,
  "importHelpers": true,
  "moduleResolution": "node",
  "experimentalDecorators": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "sourceMap": true,
  "baseUrl": ".",
  "allowJs": false,
  "noEmit": true,
  "types": [
   "webpack-env"
  ],
  "paths": {
   "@/*": [
    "src/*"
   ]
  },
  "lib": [
   "esnext",
   "dom",
   "dom.iterable",
   "scripthost"
  ]
 },
 "exclude": [
  "node_modules"
 ]
}

新增 shims-vue.d.ts

根目录下新建 shims-vue.d.ts,让 ts 识别 *.vue 文件,文件内容如下

declare module '*.vue' {
 import Vue from 'vue'
 export default Vue
}

修改入口文件后缀

src/main.js => src/main.ts

改造 .vue 文件

.vue 中使用 ts 实例

// 加上 lang=ts 让webpack识别此段代码为 typescript
<script lang="ts">
 import Vue from 'vue'
 export default Vue.extend({
  // ...
 })
</script>

一些好用的插件

vue-class-component:强化 Vue 组件,使用 TypeScript装饰器 增强 Vue 组件,使得组件更加扁平化。点击查看更多

import Vue from 'vue'
import Component from 'vue-class-component'

// 表明此组件接受propMessage参数
@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  // 等价于 data() { return { msg: 'hello' } }
  msg = 'hello';
  
  // 等价于是 computed: { computedMsg() {} }
  get computedMsg() {
    return 'computed ' + this.msg
  }
  
  // 等价于 methods: { great() {} }
  great() {
    console.log(this.computedMsg())
  }
}

vue-property-decorator:在 vue-class-component 上增强更多的结合 Vue 特性的装饰。点击查看更多

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

@Component
export default class App extends Vue {
  @Prop(Number) readonly propA: Number | undefined
  @Prop({ type: String, default: ''}) readonly propB: String
  
  // 等价于 watch: { propA(val, oldval) { ... } }
  @Watch('propA')
  onPropAChanged(val: String, oldVal: String) {
    // ...
  }
  
  // 等价于 resetCount() { ... this.$emit('reset') }
  @Emit('reset')
  resetCount() {
    this.count = 0
  }
  
  // 等价于 returnValue() { this.$emit('return-value', 10, e) }
  @Emit()
  returnValue(e) {
    return 10
  }
  
  // 等价于 promise() { ... promise.then(value => this.$emit('promise', value)) }
  @Emit()
  promise() {
    return new Promise(resolve => {
      resolve(20)
    })
  }
}

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

Javascript 相关文章推荐
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
JavaScript实现前端倒计时效果
Feb 09 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 #Javascript
ElementUI之Message功能拓展详解
Oct 18 #Javascript
js实现简易计算器功能
Oct 18 #Javascript
JavaScript实现更换背景图片
Oct 18 #Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 #jQuery
CountUp.js数字滚动插件使用方法详解
Oct 17 #Javascript
CountUp.js实现数字滚动增值效果
Oct 17 #Javascript
You might like
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
Jquery 切换不同图片示例代码
2013/12/05 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
Python之Web框架Django项目搭建全过程
2017/05/02 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
python 魔法函数实例及解析
2019/09/25 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
使用Python实现牛顿法求极值
2020/02/10 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
为什么需要版本控制?
2013/08/08 面试题
优秀毕业生自我鉴定
2014/02/11 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
员工生日活动方案
2014/08/24 职场文书
食品安全承诺书范文
2014/08/29 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
推普标语口号大全
2015/12/26 职场文书
八年级物理教学反思
2016/02/19 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle