从 JavaScript 到 TypeScript 系列
2017-10-12 11:08
567 查看
随着应用的庞大,项目中 JavaScript 的代码也会越来越臃肿,这时候许多 JavaScript 的语言弊端就会愈发明显,而 TypeScript 的出现,就是着力于解决 JavaScript 语言天生的弱势:静态类型。
前端开发 QQ 群:377786580
这篇文章首发于我的个人博客 《听说》,系列目录:
《从 JavaScript 到 TypeScript 1 - 什么是 TypeScript》
《从 JavaScript 到 TypeScript 2 - 基础特性和类型推导》
《从 JavaScript 到 TypeScript 3 - 引入和编译》
《从 JavaScript 到 TypeScript 4 - 装饰器和反射》
《从 JavaScript 到 TypeScript 5 - express 路由进化》
《从 JavaScript 到 TypeScript 6 - vue 引入 TypeScript》
TypeScript 早期的目标是为了让习惯编写强类型语言的后端程序员,能够快速的编写出前端应用(微软大法好),因为 JavaScript 没有强数据类型,所以 TypeScript 提供了强数据类型,这是 TypeScript 的核心。
随着项目工程越来越大,越来越多的前端意识到强类型的重要性,随着 TypeScript 的逐渐完善,支持者越来越多,强类型的需求越来越强。于此同时,
JavaScript 行至今日,灵活,动态让它活跃在编程语言界一线。而灵活,动态使得它又十分神秘,只有运行才能得到答案。类型的补充填充了 JavaScript 的缺点,从 TypeScript 编译到 JavaScript,多了静态类型检查,而又保留了 JavaScript 的灵活动态。
简单来说:动态代码一时爽,重构全家火葬场。
查看全文
查看全文
查看全文
简单来说,装饰器就是对代码的描述。
而反射,就是在运行时动态获取一个对象的一切信息:方法/属性等等,特点在于动态类型反推导。在 TypeScript 中,反射的原理是通过设计阶段对对象注入元数据信息,在运行阶段读取注入的元数据,从而得到对象信息。
查看全文
我们将所有的 Router 按照自己的业务规则/或者自定义的其他规则进行归类 —— 然后提取出对应的
查看全文
我们对此进行了一系列探索,最后我们的风格是这样的:
查看全文
前端开发 QQ 群:377786580
这篇文章首发于我的个人博客 《听说》,系列目录:
《从 JavaScript 到 TypeScript 1 - 什么是 TypeScript》
《从 JavaScript 到 TypeScript 2 - 基础特性和类型推导》
《从 JavaScript 到 TypeScript 3 - 引入和编译》
《从 JavaScript 到 TypeScript 4 - 装饰器和反射》
《从 JavaScript 到 TypeScript 5 - express 路由进化》
《从 JavaScript 到 TypeScript 6 - vue 引入 TypeScript》
《从 JavaScript 到 TypeScript 1 - 什么是 TypeScript》
TypeScript 简称 TS。TypeScript 是 JavaScript 的超集,就是在 JavaScript 上做了一层封装,封装出 TypeScript 的特性,当然最终代码可以编译为 JavaScript。TypeScript 早期的目标是为了让习惯编写强类型语言的后端程序员,能够快速的编写出前端应用(微软大法好),因为 JavaScript 没有强数据类型,所以 TypeScript 提供了强数据类型,这是 TypeScript 的核心。
随着项目工程越来越大,越来越多的前端意识到强类型的重要性,随着 TypeScript 的逐渐完善,支持者越来越多,强类型的需求越来越强。于此同时,
angular 2.x这个领头羊率先使用
AtScript开辟了强类型战场。
JavaScript 行至今日,灵活,动态让它活跃在编程语言界一线。而灵活,动态使得它又十分神秘,只有运行才能得到答案。类型的补充填充了 JavaScript 的缺点,从 TypeScript 编译到 JavaScript,多了静态类型检查,而又保留了 JavaScript 的灵活动态。
简单来说:动态代码一时爽,重构全家火葬场。
查看全文
《从 JavaScript 到 TypeScript 2 - 基础特性和类型推导》
TypeScript 很容易学习和上手,引入成本非常的低,而代码阅读起来简直就像代码会说话一样。TypeScript 优秀的设计使得即使你没有接触过它,但是仍然能够读懂它。查看全文
《从 JavaScript 到 TypeScript 3 - 引入和编译》
许多人摩拳擦掌跃跃欲试,这篇文章我们主要介绍如何引入和编译 TypeScript。查看全文
《从 JavaScript 到 TypeScript 4 - 装饰器和反射》
顾名思义,"装饰器" (也叫 "注解")就是对一个 类/方法/属性/参数 的装饰。它是对这一系列代码的增强,并且通过自身描述了被装饰的代码可能存在的行为改变。简单来说,装饰器就是对代码的描述。
而反射,就是在运行时动态获取一个对象的一切信息:方法/属性等等,特点在于动态类型反推导。在 TypeScript 中,反射的原理是通过设计阶段对对象注入元数据信息,在运行阶段读取注入的元数据,从而得到对象信息。
查看全文
《从 JavaScript 到 TypeScript 5 - express 路由进化》
在这篇文章中,我们会把这两个特性引入,并且在 express 上,实现一层全新的路由封装。我们将所有的 Router 按照自己的业务规则/或者自定义的其他规则进行归类 —— 然后提取出对应的
Class,例如下面的
User Class就是把用户信息所有的
router都归类在一起:
class User { @httpPost @path('/user/login') login() { } @httpGet @path('/user/exit') exit() { } }
查看全文
《从 JavaScript 到 TypeScript 6 - vue 引入 TypeScript》
Vue 在 官方文档中有一节简单的介绍了如何引入 TypeScript,可惜文档太过简单,真正投入生产还有许多的细节没有介绍。我们对此进行了一系列探索,最后我们的风格是这样的:
import { Component, Prop, Vue, Watch } from 'vue-property-decorator' import { State, Action, Mutation, namespace } from 'vuex-class' import Toast from 'components/Toast.vue' const userState = namespace('business/user', State) @Component({ components: { Toast }, }) export default class extends Vue { // data title = 'demo' @Prop({ default: '' }) text: string // store @userState userId // computed get name (): boolean { return this.title + this.text } // watch @Watch('text') onChangeText () { } // hooks mounted() { } }
查看全文
相关文章推荐
- 【脚本语言系列】关于 JavaScript 数据可视化,你需要知道的事
- 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点
- 深入理解JavaScript系列(17):面向对象编程之概论
- 深入理解JavaScript系列(30):设计模式之外观模式
- javascript系列(3)-在html的文档模式
- 从零开始学_JavaScript_系列(十一)——dojo(5)(GRID表格进阶:更新值,name,重置表结构/缓存,重绘表格)
- 深入理解JavaScript系列(45):代码复用模式(避免篇)
- 掌握Ajax系列 第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 深入理解JavaScript系列(39):设计模式之适配器模式
- Javascript基础系列之(五)条件语句(switch语句)
- [经典推荐]事半功倍系列之javascript(二)
- 深入理解JavaScript系列(8):S.O.L.I.D五大原则之里氏替换原则LSP
- 深入理解JavaScript系列(7):S.O.L.I.D五大原则之开闭原则OCP
- JavaScript系列基础篇之一: Number类型的几个特殊值
- 读汤姆大叔 深入理解JavaScript系列(3):全面解析Module模式
- 深入理解JavaScript系列(50):Function模式(下篇)
- 精通Javascript系列之数值计算
- JavaScript内部原理系列-闭包(Closures)
- 《深入理解JavaScript系列》系列技术文章整理收藏
- JavaScript系列之DOM操作