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自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP中的表达式简述
2016/05/29 PHP
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
浅谈Vue.js
2017/03/02 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
python3编码问题汇总
2016/09/06 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
Python 调用Java实例详解
2017/06/02 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
OpenCV 边缘检测
2019/07/10 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
Python实现自动装机功能案例分析
2020/10/22 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
在什么时候需要使用"常引用"
2015/12/31 面试题
餐厅执行经理岗位职责范本
2014/02/26 职场文书
化工操作工岗位职责
2014/04/29 职场文书
关于环保的活动方案
2014/08/25 职场文书
创先争优公开承诺书
2014/08/30 职场文书
公司收款委托书范本
2014/09/20 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书