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插件写法笔记整理
Sep 06 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
Three.js学习之网格
Aug 10 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
Vue是怎么渲染template内的标签内容的
Jun 05 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
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
Python2中的raw_input() 与 input()
2015/06/12 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
Python中作用域的深入讲解
2018/12/10 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
日语系毕业求职信
2014/07/27 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
流动人口婚育证明
2014/10/19 职场文书
安全伴我行主题班会
2015/08/13 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB