技术 | TypeScript

技术 | 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还有很多非常优秀的设计,剩下的就需要你慢慢发掘了。不要犹豫,喜欢就赶快学习,实践,用起来吧。

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

读万卷书,行万里路。

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

时间: 2024-10-20 22:58:29

技术 | TypeScript的相关文章

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

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L

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

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L

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

前言:讲起前端,我们就不能不讲CSS与Javascript,在这两种技术广泛应用的今天,他们的扩展也是层出不穷,css的扩展有Less.Sass.Stylus 等,js的超集有Typescript等.今天我们就简单来聊聊Less与Typescript以及静态模块打包器webpack. 本节目标:本文为简单普及性知识,旨在让大家了解并初步学会怎么去用这三项技术,以及这三项技术在开发的过程中给我们带来的便利性与好处,挑起大家对这三项技术的兴趣,方便同学们课后去学习. 本文借鉴了以下同学的文章,特此感

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

本篇文章旨在介绍下TypeScript这门新兴的程序设计语言,不需要你有多么强的专业知识,只需要你有半支烟的功夫. 好了,废话不多说,赶紧进入正题.为什么你需要拥抱TypeScript?那么你首先需要了解下TypeScript是个什么东东,不然我也只能劝您一句:“路边的野花你不要采”. TypeScript is a superset of JavaScript.   上面这一句就是官方给他的定义,翻译过来就是“TypeScript是JavaScript的超集”.呵呵,官方的说法依旧还是那么官方

【新书推荐】《微软开源跨平台移动开发实践》带你走近微软开源开源跨平台技术

上周收到本书作者李争送的一本12月份的新书<微软开源跨平台移动开发实践——利用ASP.NET Core 1.0 .Apache Cordova.Xamarin和Azure快速构建移动应用解决方案>.这本书的名字超长.这本书也是超薄,只有220页,一个周末时间就读完了,但是这本书的内容确是超丰富,浓缩了微软这三年向开源和跨平台领域的转变,微软在开源和跨平台领域构建出来的一套技术体系.从服务端的NET Core.ASP.NET 和 Web APi ,到Web端的 Typescript脚本语言,再到

从最新的技术趋势看前端的未来

新一期的ThoughtWorks技术雷达有点出乎意料,使用new标签的框架.工具.技术.语言等等超过了一半——Vue.js.ES2017上榜,Three.js凭着VR的火又上榜了,还有熟悉的Electron,以及微前端的概念. 让我们先看看一些技术亮点~~. 前端在可见的未来 在那篇<最流行的编程语言JavaScript能做什么?>的文章里,我们看到了JavaScript在各个领域的应用.在这一期里,仍然有很多亮点(new): Vue.js Vue.js,如果你在使用Vue.js,那么你更应该

前端技术的发展和趋势

Web 发展了几十个春秋,风起云涌,千变万化.我很庆幸自己没有完整地经历过这些年头,而是站在前人的肩膀上行走.Web 技术发展的速度让人感觉那几乎不是继承式的迭代,而是一次又一次的变革,一次又一次的创造.这几年的前端,更为之甚! 我从 12 年底开始接触前端,12 年之前的前端发展情况只能从上一辈的笔触中领会.本文会盘点从 09 年开始到 15 年间前端技术的革新,同时也会从多个角度,解读近几年前端技术发展的潜在因素,其中穿插了若干对前端演进的拙见,难免会有错误和疏漏,望读者可以补充和斧正. 那

聊聊移动端跨平台开发的各种技术

介绍 最近出现的 React Native 再次让跨平台移动端开发这个话题火起来了,曾经大家以为在手机上可以像桌面那样通过 Web 技术来实现跨平台开发,却大多因为性能或功能问题而放弃,不得不针对不同平台开发多个版本. 但这并没有阻止人们对跨平台开发技术的探索,毕竟谁不想降低开发成本,一次编写就处处运行呢?除了 React Native,这几年还出现过许多其它解决方案,本文我将会对这些方案进行技术分析,供感兴趣的读者参考. 为了方便讨论,我将它们分为了以下 4 大流派: Web 流:也被称为 H

OSChina 技术周刊第二十九期 —— HTTP 有时候比 HTTPS 好?

每周技术抢先看,总有你想要的! 移动开发 [软件]iOS 图表控件 ios-charts [软件]跨平台应用开发框架 Bridge.NET [博客]为什么不能往 Android 的 Application 对象里存储数据 [博客]Android apk 自我保护技术-修改 Dalvik 指令 前端开发 [软件]AngularJS 指令绑定 Angular-xeditable [软件]J2EE 快速开发平台 EOVA [软件]轻量级 JavaScript 库 JSLite [软件]jQuery 就