技术 | 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还有很多非常优秀的设计,剩下的就需要你慢慢发掘了。不要犹豫,喜欢就赶快学习,实践,用起来吧。
聊完技术,我还想聊聊最近我关注的一部纪录片《航拍中国》,这又是一次为央视点赞极好的纪录片,和前几年《舌尖上的中国》一般,涨了知识,又是佳作。这部纪录片以空中视角俯瞰中国,立体化展示我国历史人文景观、自然地理风貌及经济社会发展,全景式俯瞰一个观众既熟悉又新鲜的美丽中国、生态中国、文明中国。说实话,我看了第一集《海南》,就被里面的风景所震撼了。很想抽时间和找机会,能再次走上旅途,去欣赏这大好河川风光,也不枉人生来了这么一次。说起来在旅途,还是很多年前的事情了,很像有那么一种感觉,找三两好友,骑着摩托车,环游全中国,这是我高中时代立志的一件事情,至今还未实现,和我的农业梦想等同。
读万卷书,行万里路。
你身边如果有朋友对混合领域(跨技术栈)或全栈,编程感悟感兴趣,可以转发给他们看哦,^_^先谢过啦。
技术 | TypeScript的更多相关文章
- CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- 前端常用技术概述--Less、typescript与webpack
前言:讲起前端,我们就不能不讲CSS与Javascript,在这两种技术广泛应用的今天,他们的扩展也是层出不穷,css的扩展有Less.Sass.Stylus 等,js的超集有Typescript等. ...
- 蒲公英 · JELLY技术周刊 Vol.08 -- 技术周刊 · npm install -g typescript@3.9.3
登高远眺 沧海拾遗,积跬步以至千里 基础技术 官宣: Typescript 3.9 正式发布 TypeScript 3.9 正式发布,这个版本主要聚焦于性能.改进某些特性和提升稳定性.编译器效率在这一 ...
- 蒲公英 · JELLY技术周刊 Vol.10 为什么你还不使用 TypeScript
登高远眺 天高地迥,觉宇宙之无穷 基础技术 直播延迟?为什么流媒体直播的延迟那么高 随着通信技术的发展,视频点播.直播业务也逐渐兴起.在这些业务形态中,流媒体技术扮演着重要的角色.但在实际使用中,即便 ...
- 前端技术大行其道,再不拥抱TypeScript你就老了!
本篇文章旨在介绍下TypeScript这门新兴的程序设计语言,不需要你有多么强的专业知识,只需要你有半支烟的功夫. 好了,废话不多说,赶紧进入正题.为什么你需要拥抱TypeScript?那么你首先需要 ...
- 新西达电调初始化代码,使用nodejs ffi技术调用wiringpi,代码使用typescript编写
这是我设计的F450四轴飞行器飞控代码的一部分 运行在orangepi-zero上,操作系统是armbian,思路是使用node-ffi调用wiringpi的so库与GPIO通信,然后控制端逻辑代码使 ...
- TypeScript: Angular 2 的秘密武器(译)
本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...
- CoreCRM 开发实录——开始之新项目的技术选择
2016年11月,接受了一个工作,是对"悟空CRM"进行一些修补.这是一个不错的 CRM,开源,并提供一个 SaaS 的服务.正好微软的 .NET Core 和 ASP.NET C ...
随机推荐
- linux下怎么安装Go开发环境?linux部署golang
linux下怎么安装Go开发环境?linux部署golang 0.请自行安装SSH远程工具 1. SSH远程登录你的linux服务器 2. yum install mercurial安装 me ...
- 网络安全系列 之 SQL注入学习总结
目录 1. sql注入概述 2. sql注入测试工具 3. sql注入防御方法 3.1 问题来源 3.2 防御方法 4. SQL注入防御举例 4.1 使用JDBC时,SQL语句进行了拼接 4.2 使用 ...
- 金融IT的算法要求
岗位职责 1.负责宏观经济预测的算法研究 2.负责债券.股票.基金等品种的模型研究 3.负责持仓收益分析,及绩效归因等模型研究 任职要求 1.一般数学: 线性代数与矩阵运算 随机过程 微积分 概率论 ...
- tensorflow识别验证码(2)-tensorflow 编写CNN 识别验证码
1. 导入依赖包 #coding:utf-8 from gen_captcha import gen_captcha_text_and_image from gen_captcha import nu ...
- [NOIP2019模拟赛]HC1147 时空阵
题目描述: 幽香这几天学习了魔法,准备建造一个大型的时空传送阵. 幽香现在可以在幻想乡的n个地点建造一些传送门,如果她建造了从地点a与地点b之间的传送门,那么从a到b和从b到a都只需要单位1的时间. ...
- thinkphp 关联关系
关联关系 通常我们所说的关联关系包括下面三种: 大理石平台等级 一对一关联 :ONE_TO_ONE,包括HAS_ONE 和 BELONGS_TO 一对多关联 :ONE_TO_MANY,包括HAS_MA ...
- ThinkPHP 读取数据
在ThinkPHP中读取数据的方式很多,通常分为读取数据.读取数据集和读取字段值. 步进电机和伺服电机 数据查询方法支持的连贯操作方法有: 连贯操作 作用 支持的参数类型 where 用于查询或者更新 ...
- HDU - 6128
题意略: 题解:二次剩余板子题 //#pragma GCC optimize(2) //#pragma GCC optimize(3) //#pragma GCC optimize(4) //#pra ...
- BZOJ 2281 消失之物
ftiasch 有 N 个物品, 体积分别是 W1, W2, -, WN. 由于她的疏忽, 第 i 个物品丢失了. "要使用剩下的 N – 1 物品装满容积为 x 的背包,有几种方法呢?&q ...
- JavaSE_11_File类、递归
1.1 概述File类 java.io.File 类是文件和目录路径名的抽象表示,主要用于文件和目录的创建.查找和删除等操作. 1.2 构造方法 public File(String pathname ...