让前端的子弹飞-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
本文开篇同时引用了编程界大牛和菜鸟的语录来"大肆"宣扬前端的地位,不,不止于前端,我们的真正名字应该叫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
原文作者:黑马大前端
本文来源掘金如需转载请紧急联系作者
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
ES6 javascript 实用开发技巧
ES6 实用开发技巧 本文只罗列出在 ES6 开发过程中相对实用的内容,而非一个高大全的文档,如果希望查阅详细的内容,可购买阮一峰老师所出版的 ES6 相关图书。 定义变量/常量 ES6 中新增加了 let 和 const 两个命令,let 用于定义变量,const 用于定义常量 两个命令与原有的 var 命令所不同的地方在于,let, const 都是块级作用域,其有效范围仅在代码块中,实例如下: //es5 if(1==1){ var b = 'foo'; } console.log(b);//foo //es6 if(1==1){ let b = 'foo'; } console.log(b);//undefined (b is not defined) 定义常量对象 const a = {a:1,b:2}; a.b = 3; console.log(a);//{a:1,b:3} 上例中,常量 a 中的内容在定义后,再进行修改依然有效,原因是对于对象类型的使用是指针式引用,常量只是指向了对象的指针,对象本身的内容却依然可以被修改,注意,数组(Array) 也是对象; 那么如果在定...
- 下一篇
44 道 JavaScript 难题(JavaScript Puzzlers!)
这是一套很经典的JavaScript题了,做之前一些题我也觉得稀奇古怪,但一道一道做,记下错题,去查解释,做完感觉真的很值得,有点像回到高中时候,就想到了沙耶加。如果在学习路上疲惫了,安利你们《垫底辣妹》 。这里是这套题的原文链接,可以不看答案一道一道去做。 下一篇《一站到底 ---前端基础之网络》 1. ["1", "2", "3"].map(parseInt) 答案:[1, NaN, NaN] 解析:parseInt (val, radix) :两个参数,val值,radix基数(就是多少进制转换) map 能传进回调函数 3参数 (element, index, array) parseInt('1', 0); //0代表10进制 parseInt('2', 1); //没有1进制,不合法 parseInt('3', 2); //2进制根本不会有3 巩固:["1", "1", "11","5"].map(parseInt) //[1, NaN, 3, NaN] parseInt('13',2) // 1 , 计算机在二进制只认识0,1,parseInt转换时就当作不认识的字符忽略...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Hadoop3单机部署,实现最简伪集群
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果