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 相关文章推荐
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
vue中render函数的使用详解
Oct 12 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
详解elementUI中input框无法输入的问题
Apr 27 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
php单文件版在线代码编辑器
2015/03/12 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
js实现拖拽效果(构造函数)
2015/12/14 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
python实现一个简单的udp通信的示例代码
2019/02/01 Python
python多线程使用方法实例详解
2019/12/30 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
美国知名艺术画网站:Art.com
2017/02/09 全球购物
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
旷课检讨书大全
2014/01/21 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
交通事故和解协议书
2014/09/25 职场文书
学前班语言教学计划
2015/01/20 职场文书
课题研究阶段性总结
2015/08/13 职场文书
python爬虫--selenium模块
2021/03/31 Python
java多态注意项小结
2021/10/16 Java/Android
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers
Nginx速查手册及常见问题
2022/04/07 Servers
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android