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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
细述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删除数组中的特定元素的代码
2012/06/28 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
javascript简易画板开发
2020/04/12 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python中DJANGO简单测试实例
2015/05/11 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Python pip配置国内源的方法
2020/02/14 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
高一自我鉴定
2013/12/17 职场文书
小学生演讲稿
2014/01/12 职场文书
岗位职责风险点
2014/03/12 职场文书
老人祝寿主持词
2014/03/28 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
解析MySQL索引的作用
2022/03/03 MySQL
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL