美文网首页程序员
TypeScript简介

TypeScript简介

作者: 横竖撇折点 | 来源:发表于2018-12-04 15:06 被阅读15次

    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

    相关文章

      网友评论

        本文标题:TypeScript简介

        本文链接:https://www.haomeiwen.com/subject/xogmcqtx.html