让前端的子弹飞-TypeScript-阿里云开发者社区

开发者社区> 李博 bluemind> 正文

让前端的子弹飞-TypeScript

简介:
+关注继续查看
Any application that can be written in JavaScript,will eventually be written in JavaScript.

-- Jeff Atwood 2007

前端,文也;
后端,武也;
全栈,文武双全者也;
前端全栈者,涉猎甚广,
文可交互,武可并发,
硬件编程,更添异彩。
吾乃前端门下后生之辈,时值太学二年,拜入星辰门下,
研修前端之术,数年以来,前端招式变化之快,
群雄割据,框架纷争,
三国鼎立者,Angular、React、Vue,吾惶恐不及,
09年始,NodeJS中途岛登陆,攻城略地,
超炫3D,WebVR,叹为观止。
古人有云,习前端者,足以立天下。

-- cuitianze 2016


1

本文开篇同时引用了编程界大牛和菜鸟的语录来"大肆"宣扬前端的地位,不,不止于前端,我们的真正名字应该叫JavaScript开发者,“前端”是历史遗留下的误解,亦或是在工作岗位中被局限于的小小领域。


01

Jeff Atwood定律

那么2007年提出震惊中外的“Atwood定律”的Jeff Atwood何许人也?他便是叱咤编程界的StackOverflow创始人。

原博客链接如下:https://blog.codinghorror.com/the-principle-of-least-power/。

Jeff Atwood定律的由来:JavaScript既能独立完成所有互联网应用所需的功能开发,同时又是主流编程语言中最为轻量级的。

02


JavaScript应用场景

JavaScript虽然不是万能的,但他却能运行在我们所期望能运行的任何地方,譬如:


  • 你的浏览器上(几乎所有的浏览器,估计不支持的浏览器早已消逝在历史长河中);

  • 你的手机和平板电脑(如React Native,Weex,Cordova);

  • 你的桌面应用(如Electron、NW.js可以横跨Mac、Windows、Linux三大主流操作系统);

  • 你的服务器上运行着NodeJS甚至最近刚推出的让人学不动了的Deno。

不仅如此,目前最高流量入口的微信小程序和支付宝小程序的开发语言全都是JavaScript,硬件编程语言中JavaScript也占得了一席之地,区块链应用开发中JavaScript也是不可或缺的一环。

03


JavaScript弊端

然而,尽管JavaScript如此火,几乎扛下了互联网应用的半壁江山,但在语言设计上却饱受诟病,正如Node 之父 Ryan Dahl所说的Node设计缺陷一样,其中也涉及到了JavaScript的短板,要不然他也不会在新服务端框架Deno中使用TypeScript作为主要语言。

冥冥中自有定数,Deno也许未必能替代Node,尤其是在Node已经诞生10年,早已是前端工程化中流砥柱的工具,全世界也有无数个运行中的服务端应用;而Deno此时此刻却仍然是Demo。但TypeScript必将从此一振,此时此刻,也许不是学习Deno的最佳时机,但一定是学习TypeScript的最佳时机。JavaScript开发者必将迎来一个崭新的时代,开启构建大型应用的新时代。

04


踩过的坑

曾几何时,我们在开发调试过程中不知道踩过了多少坑,无数次激昂澎湃地面对项目代码重构却望而却步,因为你不确定弱类型的JavaScript代码究竟埋藏了多少地雷,也许正是你亲手埋下的。

JavaScript的函数可以接受任意类型的参数,看起来很灵活,但一不小心就让我们陷入排查Bug的地狱中。

function func(anything) {
 return;
}
复制代码

像Java这样的强类型语言,如果参数不是特定的类型就会报错,虽然在定义变量时有些繁琐,但确实能够在很大程度上避免很多低级却很隐蔽的Bug。

05


TypeScript的问世

鉴于以上问题,TypeScript横空出世,TypeScript是JavaScript的超集,遵循最新的ES6规范,弥补了JavaScript在大型应用开发中的不足。TypeScript在静态类型检查、代码重构和语言服务方面的优势十分明显,而这些正好是JavaScript的劣势。

除此之外,在前端面试过程中经常会考一些JavaScript类型转换的黑魔法,如+String类型可以转换成Number类型。我个人认为就算这样代码十分精简,也是不应该提倡使用的,因为这以牺牲代码可读性和可维护性为代价,让许久之后的重构变得有心无力、如履薄冰。

以弱类型语言著称的JavaScript在字符串、数字和日期等类型直接的隐式类型转换让流入和流出函数的对象类型变得无法窥视,导致在团队开发过程中,强调撰写代码注释成为家常便饭的事情,对代码进行注释变得极其重要,否则团队新成员很难立即接手项目。

TypeScript可以很好地解决这个问题,你不需要再单独提交一份文档进行详细地解释代码,TypeScript可以清楚地记录每一个对象的属性、方法的参数等。

06


TypeScript基本介绍

TypeScript支持与JavaScript几乎相同的数据类型,此外还提供了实用的枚举类型方便我们使用。

  • 布尔值

let isDone: boolean = false;

  • 数字

let decLiteral: number = 6;

  • 字符串

let name: string = "bob";

  • 数组

let list: number[] = [1, 2, 3];

  • 元组 Tuple

let x: [string, number];

  • 枚举

enum Color {Red, Green, Blue}

  • 任意值

let notSure: any = 4;

  • 空值

function warnUser(): void {

alert("This is my warning message");

}

let unusable: void = undefined;

  • Null 和 Undefined

let u: undefined = undefined;

let n: null = null;

  • Never

function infiniteLoop(): never {

while (true) {

}

}

  • Object

declare function create(o: object | null): void;

联合类型,又可以称之为选择类型,只要满足其一便可。

let age: number | string;

类,类是TS的核心,使用TS开发时,大部分代码都是写在类里面的。

class Greeter {
 greeting: string;
 constructor(message: string) {
 this.greeting = message;
 }
 greet() {
 return "Hello, " + this.greeting;
 }
}
复制代码

更进一步,类有公共,私有与受保护的修饰符。

class Person {
 public name: string;
 private age: number;
 public constructor(theName: string) { this.name = theName; }
 protected move(distanceInMeters: number) {
 console.log(`${this.name} moved ${distanceInMeters}m.`);
 }
}
复制代码
  • public 公有 任何人可以访问

  • private 私有 只有类内部可以访问

  • protected 受保护 只有子类能用

接口Interface,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

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"});
复制代码

其中“?”表示可选参数。

function test(a:string, b?:string, c:"ctz"){
 console.log(a);
 console.log(b);
 console.log(c);
}
复制代码

泛型,在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以自定义数据类型来使用组件。

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

let myIdentity: <T>(arg: T) => T = identity;
复制代码

class Calc<T> {
 a: T;
 b: T;
}
复制代码

07


TypeScript的未来

总之,对于Javascript来说,TypeScript就像超时代的自己!

随着技术的发展,JavaScript终会向着TypeScript的方向看齐,届时我们能更加游刃有余地开发超大型应用。

在未来,我相信,任何能用JavaScript实现的应用,终将使用TypeScript写成。

Any application that can be written in JavaScript,will eventually be written in TypeScript.

本文只是抛砖引玉,更多关于TypeScript的用法还需要大家在实践中自己去探索和慢慢积累。

TypeScript官方文档地址:http://www.typescriptlang.org/docs/home.html。


原文发布时间:2018-06-22

原文作者:黑马大前端

本文来源掘金如需转载请紧急联系作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9480 0
Foundation 6 – 先进的响应式的前端开发框架
  Foundation 6 让您的项目从原型到成平比以往任何时候都更有效!它包括了广泛的模块和灵活的组件。这些多功能就像轻便的积木,可以很容易地把你的想法实现。所有的代码片段支持ARIA属性和作用以及如何正确使用这些组件的说明。
659 0
云计算的前端应用值得关注
本文讲的是云计算的前端应用值得关注,中科院计算所 陈益强:时间有限,下面可以单独找钟先生聊一聊,我知道大家都对病毒还有这些比较感兴趣,因为昨天我刚接到我家里父亲打来的电话,说他机器中毒了,我说这也没办法,我说我在北京,你在老家我也在办法,所以云安全对我们来说是很重要的,大家听了四个报告,
1446 0
一直想做前端工程师的后端程序员
前端CSS框架: bootstrap 前端mvc框架: angular.js 前端javascript类库: jquery 服务器平台: node.js web服务器框架: express 数据库: mongodb 数据库驱动: mongoose 移动前端框架: jquery mobl...
751 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10841 0
前端工程师的未来在哪里?
很多童鞋在上次的问卷调查里表示,希望多推出一些前端方向的内容。今天为大家分享一篇关于前端工程师职业发展的文章,抛砖引玉,期待与大家一起交流探讨。 我是成曰,目前在蚂蚁金服数据平台部任职前端工程师,从事数据中台产品的研发。
6459 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13163 0
前端开发者必备的20个文档和在线工具
  之前给大家分了很多的在线工具和参考文档,这里又为大家搜集了前端开发必备的20个在线工具和指南。新的一周,你需要计划学习新的东西或者能够提升你的能力。相信你会在这个列表中发现对你很有用的资料。 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 十个拥有丰富 UI 组件的...
828 0
+关注
李博 bluemind
云栖社区Java、Redis、MongoDB运营小编,有意合作请联系钉钉:15810436147
2107
文章
1103
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载