TypeScript简介

1.TypeScript是什么

以下是官方比较书面化的一些介绍:

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发。

TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性。

TypeScript支持为已存在的 JavaScript 库添加类型信息的头文件,扩展了它对于流行的库如 jQuery,MongoDB,Node.js和 D3.js的好处。

JavaScript + 类型声明

其实巴拉巴拉这么多,我们看了可能还是不知道这是个什么鬼,还不如直接放一段代码来得实在:

       public getRandomArray() : Array<number>{

             //定义数字类型的数组 arrayA

             let arrayA : Array<number> = [1,2,3,4,5,6,7,8];

             //定义数字类型的数组 arrayB

             let arrayB : Array<number>= newArray<number>();

             let index : number;

             //从0到9循环

             for( let i=0 ; i< 10 ;i ++){

                    //生成一个比arrayA长度小的随机数,作为下标

                    index = Math.floor( Math.random() * arrayA.length );

                    //取出arrayA指定下标的值放入arrayB

                    arrayB.push(arrayA[index]);

             }    

             console.log("已随机生成一个数组",arrayB);

             return arrayB;

       }

这段代码实现了一个方法,用来生成一个随机的数组:先定义了一个数组arrayA,赋值为1到8;又定义了一个空的数组arrayB。循环10次,每次都随机取arrayA中的一个元素,放入arrayB,循环完毕后,控制台输出arrayB,并将其作为方法的返回值返回。通过代码的介绍,你会发现,这里面除了方法和变量的定义时后面跟了一个":Array"、":number"外,完全就是一段标准的JavaScript代码。这就是TypeScript的第一个特点:在JavaScript的基础上进行了扩展,增加了类型,同时完全兼容JavaScript语法。

JavaScript + 面向对象

我们再来看下面这段代码:

//用户实体类

classUser{

       //姓名 字符串类型

       private name : string;

       //年龄 数字类型

       private age : number;

       //带参数的构造方法 传入参数为 姓名,年龄

       public constructor(name:string,age:number){

             this.name = name;

             this.age = age;

       }

       //获取姓名

       public getName():string{

             return this.name;

       }

       //获取年龄

       public getAge():number{

             return this.age;

       }

}

这段代码是用TypeScript声明的一个实体类,Java程序员们可能会惊叹一下:我去!这不就是抄袭的Java吗!?这段代码定义了一个User对象,它有两个属性:name,age,有个构造方法,除了类型声明后置了以外,简直和Java中实体类的声明一模一样。当然,它们只是长得像,用起来还是使用JavaScript的语法格式。(TypeScript真的是要让Java和JavaScript傻傻分不清楚了呢)这就是TypeScript的第二个特点:在JavaScript的基础上添加了基于类的面向对象编程。

2.为什么要用TypeScript

经过上面的介绍,我们知道了TypeScript(简称TS)其实就是增强版的JavaScript(简称JS),那么随着jQuery、vue、node.js等框架的兴起,我们很多的前端编程使用JavaScript就足够了,为什么还要用TypeScript呢?我的回答是:为了掌控我们自己写的代码。看到我的回答,你可能感到诧异:我自己写的代码我还掌控不了吗?答案是肯定的。

JavaScript的弱类型

由于JS是一门弱类型语言,所有变量和方法的返回值都可以是任意类型的。你定义好了一个变量或者方法,在你使用时,还必须返回来看看它究竟是个啥。因为它是弱类型的,编辑器没法帮你做代码检查(比如:即使你要调用变量不存在的属性编辑器也不会提示错误,因为编辑器也不知道它是什么类型的,有什么属性),必须你亲力亲为,会出现你在总是在写代码时一片太平盛世的景色,一运行,各种能想到的想不到的错误。

JavaScript的不可控性

即使你严格检查你的代码,保证所有变量和方法用的都对,一切逻辑都正确,也不一定能得到你想要的结果,比如那个经典的0.2+0.4的问题:

       console.log(0.2+0.4===0.6);

       //运行结果过为:false  0.2 + 0.4 = 0.6000000000000001

这个案例在这里就不详细解释了,有兴趣的可以网上查一下,有很多经典的JS问题。一句话:JavaScript有太多不可控性

TypeScript有益身心健康

因为TS加入了类型的概念,在写代码时,编辑器就能对你引用的方法和变量做类型检查,在Egret Wing中有很好的代码提示功能和代码检查功能,避免这些编码问题在运行时才暴露,同时也使你的代码逻辑清晰,易读易维护。开发时满屏都是清晰明了的代码,想想都兴奋,心情好了,精神足了,气色红润了,不觉间人生也充满了乐趣。而面向对象的编程,更让人激动,如果你原本就是使用面向对象语言的开发者,那么你会第一次感觉到写JS(你没看错,TS语言最终也是被编译成JS运行在浏览器的)也使这么爽的事情。TS让你像写Java一样写JS,是不是很神奇。当你要开发一款游戏时,代码量巨大,而且不容许有任何不确定的错误产生,TS是代替JS的首选,没有之一。

3.TypeScript的学习成本有多大

每种编程语言都有很多共通的地方,当你了解JS,那么你需要补充一些面向对象的知识。当然,我们说过TS能完全兼容JS,你直接用JS语法写一样可行,但这样你就感受不到TS的灵魂所在(小伙子,这样的代码是没有灵魂滴)。当你了解面向对象语言,又了解JS时,恭喜你,看一眼文档,直接上手就行。

TypeScript推荐文档链接:https://www.tslang.cn/docs/handbook/basic-types.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,295评论 6 512
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,928评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,682评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,209评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,237评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,965评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,586评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,487评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,016评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,136评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,271评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,948评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,619评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,139评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,252评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,598评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,267评论 2 358

推荐阅读更多精彩内容

  • TypeScript 是什么 TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScri...
    semlinker阅读 2,900评论 0 12
  • TypeScript 是微软开发和控制的开源项目,我在应用 Anguar 2+ 和 Ionic 2+ 框架开发系统...
    廖全磊LesterLiao阅读 1,637评论 0 3
  • 慕课网@JoJozhai 老师 TypeScript入门课程分享 TypeScript入门 ES5,ES6,JS,...
    shangpudxd阅读 10,436评论 0 22
  • 姓名:易平香 企业名称:东莞耀升机电有限公司 组别:AT感谢组 【日精进打卡第24天】 【知~学习】 诵读《大纲》...
    shine1yi阅读 86评论 0 0
  • 其实,朝鲁图死的前一天,古娜是多少有些预感的。 农历冬月初一,天灰蒙蒙的,像一面生锈了的铁锅扣住大地,压抑着格鲁柴...
    王学勤_2861阅读 163评论 0 0