技术 | TypeScript

 

第一次接触TypeScript还是和一帮兄弟在居民楼里撸每日优鲜App的时候,没有想过那么多,只想可以快速实现和快速落地,于是我们选择ionic这个Hybrid框架,而它又是基于Angularjs的,为了在某些方面保持一致性和快速迭代,我们选择了TypeScript。它的收益现在回过头来再来看三年前我们的选择,强大的静态类型系统,类,先进的JavaScript高级特性,在保持快速落地时,有极强大的推进作用。虽然,那一年的TypeScript有些简陋,不过我们已然给出了答案。相信如果有朋友看过Vue的源码,肯定对其中的泛型,类型有疑惑。不错,这就是TypeScript,有兴趣的朋友,一定要尝试一番。 构建大型应用,TypeScript在某些方面要比纯粹的ES6要强大的多的多,传送门:http://www.typescriptlang.org/index.html

TypeScript是微软开发并且开源的编程语言,本质上它是对JavaScript的一种增强,说到增强又不得不提及另一个CoffeeScript,这算是代表了两种不同的方向。而TypeScript对JavaScript的增强到达了静态类型系统,通过在编译期的推断,来避免错误的发生,这对于构建大型软件设计至关重要。不过,它最终会生产JavaScript,这也意味着可以运行在任何可以运行JavaScript引擎容器中。“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.” 这就是TypeScript官网给予的重要介绍。

说到类型系统,我们不得不说一些强类型语言,Objective-C就是,既然增加了“静态”二字,必然是与运行时的类型检查机制有所不同。静态类型系统必然是处于编译期的一种类型检查推断,有了这个,在某种意义上来说,你可以推断整个程序较为复杂的运行逻辑。

第一种收益是可以推断错误,比如你定义了一个String类型,传入的参数又是Number,用普通的JavaScript来执行一下,不会出现错误,但是这违背了一些预期的原则。如果用TypeScript来编译一次,那么通过类型系统,你就可以很快的推断出来错误,对程序加以修正,回到正确的轨道上来。第二种收益是通过类型系统来强化编程规范,众所周知JavaScript的弱鸡特性是非常灵活的,在项目较小时,也许可以很随意的处理。但是对于大型软件设计,这就是天然的暴露出来很危险的一些处理方式。那么一个复杂的系统模块,可以通过TypeScript的接口来进行抽象,这样的接口设计往往会成为一个大型系统的基石。第三个收益则是TypeScript给予提供的优秀工具链,包括IDE,Doc等等。

想起《湾区日报》曾经推送过一则国外的“段子”,为什么C井在企业应用市场里大量的使用,那是因为它足够稳定,足够为大型软件设计而生,却不够炫酷,微软在JavaScript也为我们带来了一种选择。

TypeScript提供了两种方式处理编译,一是基于Node.js编译,二是Visual Studio插件,对于我们互联网人来说,相信前一种会是比较适合的,通过npm命令来全局安装吧。

npm install -g typescript

TypeScript的文件后缀是ts,你可以输入如下代码:

function greeter(person: string) {    
   return 'Hello, ' + person;
}
greeter('icepy');
greeter(123);

然后输入 tsc hello.ts 来感受一下类型系统的魅力。

看看interface与可选型

说到可选型让我想到了Swift,这比Swift要早了很多,它对于程序的健壮起到了决定性的作用,如果一个属性是nil时,正常情况下,是需要做一次if判断的,但有了可选型之后,你只需要xx?.name,就避免的报错。

interface SquareConfig {
color?: string;
width?: number;
}
function createSquare(config: SquareConfig): {color: string; area: number} {
   let newSquare = {color: "white", area: 100};
   if (config.color) {
       newSquare.color = config.color;
}
   if (config.width) {
       newSquare.area = config.width * config.width;
}
   return newSquare;
} let mySquare = createSquare({color: "black"});

接口就好比是一个描述,通过这些描述,类型检查就能推断出来通过接口你代码中的类型命名或者与第三方定义的契约描述,在实现上是否有错误,降低开发协作的成本。

关于类和ES2015非常像

TypeScript的类描述和ES2015的定义非常像,类是面向对象编程的一切基石,关于什么是面向对象,你要自行了悟。TypeScript对于类增强的特性,不是一点点,而是较好的完成了大量修饰符的工作。

class Animal {    
   private name: string;
   protected age: number;
   public constructor(theName: string) {
       this.name = theName;
}
   public move(distanceInMeters: number) {
       console.log(`${this.name} moved ${distanceInMeters}m.`);
}
   constructor(theName: string) { this.name = theName; }
}
abstract class Animal {
abstract makeSound(): void;
   move(): void {
       console.log('roaming the earch...');
}
}

ES2015并没有去实现这些修饰符,以及抽象类等等,有了这些,才能构建一出一个完整的类,当你不想暴露出来某些属性时,这就可以通过private修饰符来定义私有属性。当然TypeScript也实现了存取器(getter/setter),存取器有时候的作用是非常有用的,这也非常像Vue里的计算属性,你可以通过get/set方法来处理一些事务。

泛型为你的大型软件设计提供了灵活性

如果你的某些设计既支持当前的数据类型,又可以支持未来的数据类型,那么泛型就是你唯一的选择,它可以为你的重复使用的类,支持不同的数据类型。

function identity<T>(arg: T): T {    
   return arg;
}

在某些情况下,我们需要一种方式来使入参的类型与出参的类型一致,在不是泛型的情况下,第一次传入number,你返回了正确的类型,第二次传入string,那么必然丢失了类型信息。

这是一个很抽象的问题,再来看另外一个例子:

function identity1(arg: number): number {    
   return arg;
}
function identity2(arg: string): string {    
   return arg;
}

为了保障类型一致,你的设计可能就需要多个函数了,那如果使用了泛型,就的设计就只需要一个函数,就能正确的返回类型,这在某些情况下的设计,是非常重要的。

TypeScript还有很多非常优秀的设计,剩下的就需要你慢慢发掘了。不要犹豫,喜欢就赶快学习,实践,用起来吧。

聊完技术,我还想聊聊最近我关注的一部纪录片《航拍中国》,这又是一次为央视点赞极好的纪录片,和前几年《舌尖上的中国》一般,涨了知识,又是佳作。这部纪录片以空中视角俯瞰中国,立体化展示我国历史人文景观、自然地理风貌及经济社会发展,全景式俯瞰一个观众既熟悉又新鲜的美丽中国、生态中国、文明中国。说实话,我看了第一集《海南》,就被里面的风景所震撼了。很想抽时间和找机会,能再次走上旅途,去欣赏这大好河川风光,也不枉人生来了这么一次。说起来在旅途,还是很多年前的事情了,很像有那么一种感觉,找三两好友,骑着摩托车,环游全中国,这是我高中时代立志的一件事情,至今还未实现,和我的农业梦想等同。

读万卷书,行万里路。

你身边如果有朋友对混合领域(跨技术栈)或全栈,编程感悟感兴趣,可以转发给他们看哦,^_^先谢过啦。

技术 | TypeScript的更多相关文章

  1. CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  2. CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  3. 前端常用技术概述--Less、typescript与webpack

    前言:讲起前端,我们就不能不讲CSS与Javascript,在这两种技术广泛应用的今天,他们的扩展也是层出不穷,css的扩展有Less.Sass.Stylus 等,js的超集有Typescript等. ...

  4. 蒲公英 · JELLY技术周刊 Vol.08 -- 技术周刊 · npm install -g typescript@3.9.3

    登高远眺 沧海拾遗,积跬步以至千里 基础技术 官宣: Typescript 3.9 正式发布 TypeScript 3.9 正式发布,这个版本主要聚焦于性能.改进某些特性和提升稳定性.编译器效率在这一 ...

  5. 蒲公英 · JELLY技术周刊 Vol.10 为什么你还不使用 TypeScript

    登高远眺 天高地迥,觉宇宙之无穷 基础技术 直播延迟?为什么流媒体直播的延迟那么高 随着通信技术的发展,视频点播.直播业务也逐渐兴起.在这些业务形态中,流媒体技术扮演着重要的角色.但在实际使用中,即便 ...

  6. 前端技术大行其道,再不拥抱TypeScript你就老了!

    本篇文章旨在介绍下TypeScript这门新兴的程序设计语言,不需要你有多么强的专业知识,只需要你有半支烟的功夫. 好了,废话不多说,赶紧进入正题.为什么你需要拥抱TypeScript?那么你首先需要 ...

  7. 新西达电调初始化代码,使用nodejs ffi技术调用wiringpi,代码使用typescript编写

    这是我设计的F450四轴飞行器飞控代码的一部分 运行在orangepi-zero上,操作系统是armbian,思路是使用node-ffi调用wiringpi的so库与GPIO通信,然后控制端逻辑代码使 ...

  8. TypeScript: Angular 2 的秘密武器(译)

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

  9. CoreCRM 开发实录——开始之新项目的技术选择

    2016年11月,接受了一个工作,是对"悟空CRM"进行一些修补.这是一个不错的 CRM,开源,并提供一个 SaaS 的服务.正好微软的 .NET Core 和 ASP.NET C ...

随机推荐

  1. Oracle一条数据多表连插

    insert all into T_TRAIN_MARSHALLING <trim prefix="(GKEY," suffix=")" suffixOv ...

  2. Java 面试题经典 77 问(含答案)!

    金三银四了,3月底,4月初,找工作换单位的黄金时期.4月初将会有有一大批职场人士流动... 作为Java开发码农的你是不是也在蠢蠢欲动,或者已经搞了几轮车轮战了? 我们为大家准备了 77 道经典 Ja ...

  3. 17.splash_case03

    # python执行lua脚本 import requests from urllib.parse import quote lua = ''' function main(splash) retur ...

  4. webpack用了manifest为何还是每次都生成新的vendor?

    原来的代码 //用于提取公共代码 new webpack.optimize.CommonsChunkPlugin({ //记得要在开头引入webpack names: ['vendor','manif ...

  5. springAop的使用

    AspectJ使用org.aspectj.lang.JoinPoint接口表示目标类连接点对象,如果是环绕增强时,使用org.aspectj.lang.ProceedingJoinPoint表示连接点 ...

  6. MySQL中\g和\G的作用

    \g的作用和MySQL中的分号”;"是一样: \G的作用是讲查找到的内容结构旋转90度,变成纵向结构: 下面举例说明,查找数据库中的存在的存储过程状态: SHOW PROCEDURE STA ...

  7. [转]NuGet学习笔记(1) 初识NuGet及快速安装使用

    关于NuGet园子里已经有不少介绍及使用经验,本文仅作为自己研究学习NuGet一个记录. 初次认识NuGet是在去年把项目升级为MVC3的时候,当时看到工具菜单多一项Library Package M ...

  8. Java虚拟机性能管理神器 - VisualVM(2) 入门【转】

    Java虚拟机性能管理神器 - VisualVM(2) 入门[转] 标签: java插件jvm监控工具入门 2015-03-11 16:54 955人阅读 评论(0) 收藏 举报  分类: Visua ...

  9. Duilib 入门教程: 怎么创建一个自定义的窗口

    一直想找一个好用UI 界面库,看过Direct UI,也想过 金山的界面库,后来找到了这个Duilib 现在的软件界面很多都是利用XML 来布局和定位. 像迅雷7,QQ,金山卫士等 [html] vi ...

  10. 洛谷P5341 [TJOI2019]甲苯先生和大中锋的字符串

    原题链接P5341 [TJOI2019]甲苯先生和大中锋的字符串 题目描述 大中锋有一个长度为 n 的字符串,他只知道其中的一个子串是祖上传下来的宝藏的密码.但是由于字符串很长,大中锋很难将这些子串一 ...