一起来拥抱强大的TypeScript吧--Ts+Vue完全教程
功能
- 轮播
- 搜索
- 列表
- 懒加载
- 简单动画
- loading
- vue-router.ts
- vuex.ts
- vue-class-component使用
- vuex-class使用
- xxx.d.ts声明文件
- 基于类的编写方式
- mock数据
- tsconfig.json
- webpack配置
- vue-typescript-cli
完成后的简单例子
基于类的写法加上静态类型检查,简直不能再嗨
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { State } from "vuex-class";@Component
export default class Shops extends Vue {@State shops: StoreState.shop[];@State searchVal: string;get shopList(): StoreState.shop[] {const shops = this.shops;const searchVal = this.searchVal;return shops.filter((el: StoreState.shop) => el.shopName.indexOf(searchVal) > -1);}
}
</script>
JavaScript的超集
支持所有原生JavaScript的语法
强类型语言
现在很多主流语言都是强类型的,而这点也一直是JavaScript所被人诟病的地方。使用TypeScript之后,将会在代码调试、重构等步骤节省很多时间。
比如说:函数在返回值的时候可能经过复杂的操作,那我们如果想要知道这个值的结构就需要去仔细阅读这段代码。那如果有了TypeScript之后,直接就可以看到函数的返回值结构,将会非常的方便
强大的IDE支持
现在的主流编辑器如VSCode
、WebStorm
、Atom
、Sublime
等都对TypeScript有着非常友好的支持,主要体现在智能提示上,非常的方便
可运行于任何浏览器、计算机、操作系统
强大的编译引擎
迭代更新快
不断更新,提供更加方便友好的Api
微软和Google爸爸
TypeScript是微软开发的语言,而Google的Angular
使用的就是TypeScript,所以不用担心会停止维护,至少在近几年内TypeScript都会一门主流开发语言
npm下载量非常高
截止2017.12.17, TypeScript在全球范围内的npm日均下载量在30w
左右,这个数字将近是vue下载量的10倍,可见TypeScript还是非常受欢迎的
TypeScript配置
本项目已经配置完毕,这里记录一下当时的踩坑过程
1. Webpack
首先需要安装ts-loader
,这是TypeScript为Webpack提供的编译器,类似于babel-loader
npm i ts-loader -D
接着在Webpack的module.rules
里面添加对ts的支持(我这里的webpack版本是2.x):
{test: /\.vue$/,loader: 'vue-loader',options: vueLoaderConfig
},
{test: /\.tsx?$/,exclude: /node_modules/,use: ["babel-loader",{loader: "ts-loader",options: { appendTsxSuffixTo: [/\.vue$/] }}]
}
2. tsconfig.json
创建tsconfig.json文件,放在根目录下,和package.json
同级
配置内容主要也看个人需求,具体可以去typescript的官网查看,但是有一点需要注意:
在Vue中,你需要引入 strict: true (或者至少 noImplicitThis: true,这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查,否则它会始终被看作 any 类型。
这里列出我的配置,功能在注释中给出
{"include": ["src/*","src/**/*"],"exclude": ["node_modules"],"compilerOptions": {// types option has been previously configured"types": [// add node as an option"node"],// typeRoots option has been previously configured"typeRoots": [// add path to @types"node_modules/@types"],// 以严格模式解析"strict": true,// 在.tsx文件里支持JSX"jsx": "preserve",// 使用的JSX工厂函数"jsxFactory": "h",// 允许从没有设置默认导出的模块中默认导入"allowSyntheticDefaultImports": true,// 启用装饰器"experimentalDecorators": true,"strictFunctionTypes": false,// 允许编译javascript文件"allowJs": true,// 采用的模块系统"module": "esnext",// 编译输出目标 ES 版本"target": "es5",// 如何处理模块"moduleResolution": "node",// 在表达式和声明上有隐含的any类型时报错"noImplicitAny": true,"lib": ["dom","es5","es6","es7","es2015.promise"],"sourceMap": true,"pretty": true}
}
3. 修改main.js
把项目主文件
main.js
修改成main.ts
,里面的写法基本不变,但是有一点需要注意: 引入Vue文件的时候需要加上.vue
后缀,否则编辑器识别不到把webpack的entry文件也修改成
main.ts
4. vue-shims.d.ts
TypeScript并不支持Vue文件,所以需要告诉TypeScript*.vue
文件交给vue编辑器来处理。解决方案就是在创建一个vue-shims.d.ts文件,建议放在src目录下再创建一个typings
文件夹,把这个声明文件放进去,如:src/typings/vue-shims.d.ts
,文件内容:
*.d.ts
类型文件不需要手动引入,TypeScript会自动加载
declare module '*.vue' {import Vue from 'vue'export default Vue
}
到这里TypeScript在Vue中配置就完成了,可以愉快的撸代码了~
第三方插件库
现在Vue官方已经明确提出支持TypeScript,并考虑出一个对应的vue-cli
,在这之前,Vue开发团队已经开发出了一些插件库来支持TypeScript,这里简单和大家介绍一下。
Vue-Class-Component
vue-class-component是官方维护的TypeScript装饰器,写法比较扁平化。Vue对其做到完美兼容,如果你在声明组件时更喜欢基于类的 API,这个库一定不要错过
ps:用了这个装饰器之后写方法不需要额外加逗号,贼嗨~~~
import Vue from "vue";
import Component from "vue-class-component";@Component
export default class App extends Vue {name:string = 'Simon Zhang'// computedget MyName():string {return `My name is ${this.name}`}// methodssayHello():void {alert(`Hello ${this.name}`)}mounted() {this.sayHello();}
}
这个代码如果用原生Vue语法来写的话就是这样:
export default {data () {return {name: 'Simon Zhang'}},mounted () {this.sayHello()},computed: {MyName() {return `My name is ${this.name}`}},methods: {sayHello() {alert(`Hello ${this.name}`)},}
}
Vuex-Class
vuex-class是基于基于vue-class-component
对Vuex提供的装饰器。它的作者同时也是vue-class-component
的主要贡献者,质量还是有保证的。
import Vue from "vue";
import Component from "vue-class-component";
import { State, Action, Getter } from "vuex-class";@Component
export default class App extends Vue {name:string = 'Simon Zhang'@State login: boolean;@Action initAjax: () => void;@Getter load: boolean;get isLogin(): boolean {return this.login;}mounted() {this.initAjax();}
}
上面的代码就相当于:
export default {data() {return {name: 'Simon Zhang'}},mounted() {this.initAjax()},computed: {login() {return this.$store.state.login},load() {return this.$store.getters.load}},methods: {initAjax() {this.$store.dispatch('initAjax')}}
}
Vue-Property-Decorator
vue-property-decorator 是在 vue-class-component 上增强了更多的结合 Vue 特性的装饰器,新增了这 7 个装饰器
@Emit
@Inject
@Model
@Prop
@Provide
@Watch
@Component
(从 vue-class-component 继承)
坑
引入部分第三方库的时候需要额外声明文件
比如说我想引入vue-lazyload
,虽然已经在本地安装,但是typescript还是提示找不到模块。原因是typescript是从node_modules/@types
目录下去找模块声明,有些库并没有提供typescript的声明文件,所以就需要自己去添加
解决办法:在src/typings
目前下建一个tools.d.ts
文件,声明这个模块即可
declare module 'vue-awesome-swiper' {export const swiper: anyexport const swiperSlide: any
}declare module 'vue-lazyload'
对vuex的支持不是很好
在TypeScript里面使用不了mapState、mapGetters等方法,只能一个变量一个变量的去引用,这个要麻烦不少。不过使用vuex-class
库之后,写法上也还算简洁美观
export default class modules extends Vue {@State login: boolean; // 对应this.$store.state.login@State headline: StoreState.headline[]; // 对应this.$store.state.headlineprivate swiperOption: Object = {autoplay: true,loop: true,direction: "vertical"};logoClick(): void {alert("点我干嘛");}
}
总结
TypeScript还是非常值得学习和使用一个语言,还是有很多优点的
欢迎大家对我的项目提建议,欢迎Star~
QQ交流群:323743292
Build Setup
# 安装依赖
npm install# 启动项目
npm run dev# 打包项目
npm run build
一起来拥抱强大的TypeScript吧--Ts+Vue完全教程相关推荐
- 【TypeScript】TS全解
文章目录 一.TypeScript 介绍 (一)TypeScript (二)优势 二.TypeScript 使用准备 (一)安装编译 TS 的工具包 (二)编译并运行 TS 代码 (三)简化运行 TS ...
- TypeScript基础 ts文件的创建与执行
创建 1.新建一个文件夹 2.用vscode打开 3.在文件夹下新建一个hello.ts的文件 执行 在ts文件中输入代码console.log('111') 因为node.js不能直接读取ts代码 ...
- 用 TS + Vue 写了一个在 Chrome 中运行 Prettier 格式化的扩展程序
在介绍 prettier-chrome 之前请允许我先介绍一下什么是 Prettier 如果你已经知道这是什么了并且已经会配置了,那么你可以直接跳到 prettier-chrome 的介绍 什么是 P ...
- Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP
本文完整版:<Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP> Vue3 Typescript + Axios 全栈开发教程 前端 Vue3 ...
- PHP极其强大的图片处理库Grafika详细教程(3):图像属性处理
该文章是接着上篇文章,<PHP极其强大的图片处理库Grafika详细教程(2):图像特效处理模块>,由于grafika功能太多,所以分开写,其他的点击这里 <1.图像基本处理> ...
- qpython3绘图_比Excel制图更强大,Python可视化工具Altair入门教程
比 Excel 制图更强大,Python 可视化工具 Altair 入门教程 数据转化成更直观的图片,对于理解数据背后的真相很有帮助.如果你有这方面的需求,而且还在使用 Python,那么强烈推荐你试 ...
- PHP极其强大的图片处理库Grafika详细教程(4):图形绘制
该文章是接着上一篇文章:<PHP极其强大的图片处理库Grafika详细教程(3):图像属性处理>,是grafika教程的一个部分. 所有的教程目录 <1.图像基本处理> < ...
- TypeScript深度剖析:Vue项目中应用TypeScript?
一.前言 与link类似 在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, 其是基于vue-class-component库而来,这个库vue官 ...
- 强大的虚拟机软件vmware图文使用教程
强大的虚拟机软件vmware图文使用教程 2006年11月02日 星期四 19:38 现如今 有很多人都拥有电脑,但多数人都只有一两台,想组建一个自己的局域网或者是做个小规模的实验一台机器是不够的,最 ...
最新文章
- JAVA是如何传递参数的?是传值(by value)?还是传地址(by reference)?
- word公式上下符解决方案
- 图片不能及时显示_湘D车主注意!衡阳多个十字路增设电子显示屏
- css 小知识点:inline/inline-block/line-height
- Python 2.7 cython cythonize py 编译成 pyd 谈谈那些坑(转载)
- Algorithm-Gossip(4) 三色棋(Three_Color_Flag)
- 一文理解接口和抽象类
- keil如何看c语言编译器,MDK Keil编译器编译窗口的设置
- Adaboost算法的学习笔记~
- 【深度学习】生成对抗网络(GAN)的tensorflow实现
- 倾角传感器原理及市场现状浅析
- 代理猎手(Proxy Hunter)教程(详细图文)
- 如何实现高性能的在线 PDF 预览
- Django常见面试题总结(一)
- 算法训练 幸运的店家
- FTTB MDU7353
- Apache 服务器 SSL 证书到期-续期处理步骤
- 关于HTML5的新特性
- unity科技风UI界面
- FreeNAS 0.72 安装 mldonkey 3.0.6
热门文章
- 空天地一体化通信网络中地面运营商的挑战与机遇
- 2W 字详解设计模式,干货十足
- VSCode+Markdown Preview Enhanced插件导出HTML侧边栏目录
- linux 火狐欧朋谷歌浏览器,火狐/Chrome/Opera三大浏览器争霸
- 李开复先生在清华的演讲[zt]
- java统计用户网页停留时间,前端js计算用户在网页的停留时间和用户是否在点击浏览的时间...
- 感量越大抑制频率约低_磁环抗干扰选择
- C++ sort()排序详解
- Java EE meets Web 2.0
- JavaScript通过js的方式来计算平行四边形的面积的代码