初识TypeScript

TypeScript是一种由微软开发的支持ES6标准的编程语言,它是Angular2的开发语言。它可以编译成纯JavaScript,可以在任何浏览器,任何计算机和任何操作系统上运行,并且是开源的,typescript是javascript的超集 微软开发,超集意思是包含了JavaScript,遵循ES6。

首先需要理解es5 es6 javascript typescript的概念和关系:es是客户端脚本语言的规范,es5 es6是这两种规范的版本,typescript 和 javascript是一咱客户端脚本语言,javacript实现了es5规范,typescript实现了es6规范。typescript所支持的es6语法是未来一段时间内的前端脚本语言的一个主流的语法,有很强大的ide支持,在IDE中编写typescript代码,它会根据当前所处的上下文,把能用到的类 变量 方法和关键字都提示出来,可很大的提高开发效率,当你修改变量名称的时候,IDE会全局修改。

es6规范是在2015年发布,目前市场上的主流浏览器并不能很好的去支持typescript,所以需要compiler(编译器),把typescript转换成javascript可以到浏览器去执行。

typescript-字符串新特性

    1、多行字符串,在传统的javascript中 声明一个变量 如果直接换行的话 会报错 在typescript中使用``

    2、字符串模板

    3、自动拆分字符串:当你在用一个字符串模板去调用一个方法时候,字符串模板里面表达式的值会自动赋给被调用方法中的参数;

参数的新特性

    1、参数的类型  var myname:string = 'jlc' ;  声明字符串的时候定义了string类型,这样儿赋值的会根据类型来校验,但编译后不会报错 因为javascript没有类型的概念,如果没有声明类型直接给变量赋值以后 再给变量重新赋值的不同类型的值的时候 typescript也会校验报错  这是因为ts有一个类型推断机制,如果这个变量即可以是字符串也可以是数值的话 就可以给它定义any类型


    2、参数的第二个新特性叫做默认参数,在参数声明后面用等号来指定参数的默认值;

    给参数指定了默认值之后,在声明这个方法的时候,如果没有传入该参数的时候,就会使用默认值。这时候要注意一下就带默认值的参数一定要声明在最后面。

    3、参数的第三个新特性叫可选参数,在方法的参数声明后面用问题来标明此参数为可选参数。

b参数为可选参数,c参数有默认值 所以调用的时候只传一个参数就可以了 但是注意要在方法里要处理可选的没有传值的情况

    注意可选参数必须声明在必选参数的后面。

函数新特性

    1、Rest and spread操作符,用来声明任意数量的方法参数,在javascript中是声明了一个没有任何参数的方法,在方法内部循环arguments的长度。

调用的时候可以传入任何数量的参数

    另外还有一种反过来的用法,声明的方法中只接收三个参数,但是调用的时候可以使用该操作符传 入多个值:

func(...args)

    2、另一个函数新特性generator函数,控制函数的执行过程,手工暂停和恢复代码执行,实际上在es5中是没有办法让执行中的一个函数停下,但是在es6中添加一个yield,就像是在方法中的某一处打了一个断点一样,需要再调用某一个方法才会继续往后执行

这是一个最简单的generator函数

    3、destructuring析构表达式:通过表达式将对象或数组拆解成任意数量的变量

在es5中的写法

    在es6中 typescript提供的析构表达式

通过一行代码就能实现上述在es5中的效果


析构表达式的好处就是当你需要从一个对象的属性或者是数组的元素里面用它们这些值去初始化一些变量的时候,会让你更少的去写一些代码。

表达式和循环

1、箭头表达式:用来声明匿名函数,消除传统匿名函数的this指针问题,如果匿名函数是单行的 就不需要写大括号也不需要写return 比如,var sum=(arg1,arg2)=> arg1+arg2,箭头函数最大的优势并不是简化了一点代码,最大的优势在于消除了es5里this指向的问题。

两种函数的内容是一样的,只是调用方法不一样,后者在控制台就能打印出 name is IBM 前者因为this指向的问题打印不出name的值

2、forEach(),for in 和 for of

在javascript中老的循环中会把数组的属性忽略掉,在foreach中不允许跳出循环,就是传说的break,例如 

        var myarray = [1,2,3,4,5]

        myarray.desc = 'four number';

        myarray.foreach( value=>console.log(value) );

另外for in 也是支持javascript的语法,for in循环不光会把元素循环出来,而且也会把属性循环出来,for of 循环是循环的对象的值,而不是属性,它和foreach不一样的是,它可以break掉,在满足某一个条件的情况下打断循环,可以用在任何对象上,字符串 数组等。


for of循环  输出的结果是 1 2 3 4 5 没有axb


面向对象特性

1、类(class) 类是typescript的核心,使用typescript开发时,大部分代码都是写在类里面的,这里会介绍类的定义,构造函数,以及类的继承

类的实例化是通过new这个关键字来完成的,同样一个类可以new出多个实例来,在不同的实例中可以拥有种自不同的方法,在类的内容定义变量的时候,我们可以指定一个访问控制符,访问控制符有三个默认的是pubilc  第二个是private 私有的,私有的访问控制符在外部是不可以访问的,第三个protected 受保护的,受保护的访问控制符可以类的内部或者类的子类中可以使用。

        类的构造函数,实际上就是类的里面一个特殊的方法,这个方法只有在类被实例化的时候会被调用,而且只被调用一次,这个方法的名字叫constructor() 这个方法是不能在外部访问的,只有在new这个类的时候,才会被调用,那么类的构造函数有什么用呢?比如说我希望在我实例化一个人的时候,必须为它指定一个名字,那么我们可以在constructor中传参数 constructor(name:string){} 那么我们在实例化的时候就必须传入参数,例如 var p1 = new Person('batman') 注意在构造函数中 参数加不加pubilc是完全不同的两种意义  添加pubilc 就表示声明了name属于 后面的方法中才可以调用  不添加的话就表示没有声明 在方法中是不可以调用的。

类的属性


        类的继承,类的继承涉及到两个关键字,一个是extends,是用来声明类的继承关系,另一个是super,用来调用父类的构造函数或者是方法。

当一个类用extends继承了另一个类的时候,它就继承了另一个类的属性和方法,比如声明了一个Person类 有一个eat方法,再声明一个Employee类 来extends Person类 ,并在Employee类里有一个work方法,那么我们在Employee类上实例化出来的e1 即有work方法也可以调用eat方法。

下面我们来看一下super关键字的用法,有两个用法,第一个是用来调用父类的构造函数,在子类中写入构造函数constructor,使用super调用父类构造函数。

employee继承person类 super方法调用父类的构造函数

    第二是调用父类的其它方法。通过super. 来调用。

2、泛型  参数化的类型,一般用来限制集合的内容,用来指定数组只能放某一个类型的数据

当为workers数组的第三项赋值为2的时候就会报错,因为已经指定了类型为person类,就不能放其它类型的元素

3、接口(interface) 用来建立某种代码约定,使得其它开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定,实际上在javascript中是没有接口这个概念的,在ts里提供两个关键字来支撑接口这个特性,一个interface用来声明这个特性,当你的接口用做一个方法的参数的类型声明时,当你在调用这个方法的时候ts会去检查,你传入的参数是否满足接口的所有属性。

    另一个implements用来声明某一个类某一个class 实现了某一个接口。当一个类实现一个接口的时候,它必须得实现这个类的方法。

sheep和tiger类都需要实现接口animal类中的eat方法

3、模块(module) 模块可以帮助开发者将代码分割为可重用的单元,开发者可以自己决定将模块中的哪些资源(类,方法,变量)暴露出来供外部使用,哪些资源只在模块内部使用。在模块的内部有两个关键字来支撑模块的特性,exprot和import 导出和导入,这两个关键字用来控制你的模块对外暴露什么东西,需要别人为你提供什么东西。

4、注解(annotation) 注解为程序的元素(类、方法、变量)加上更直观更明了的说明,这些说明信息与程序的业务逻辑无关,而是供指定的工具或框架使用的。

angular框架中 app.component文件,在类中有一个component注解,在这个注解中会告诉angular框架 怎么来处理appconent这个类,用来告诉一个框架怎么来处理这一个标准的typescrp类

5、类型定义文件(*.d.ts)  类型定义文件用来帮助开发者在typescript中使用已有的javascript的工具包,比如:JQuery

所有类型定义文件名都是d.ts结尾,这个文件实际上就是一个ts模块,它把我们要使用的javascript工具包里面的工具,typescript的类通过exprot的方法暴露出来,然后在你自己写的方法中通过import的方法引入进去,另外各种的类型定义文件,可能通过typings工具来查找和安装。

首先npm install typings --global可以把工具装上,然后使用typeings命令可以设置或安装某一个类型定义文件 (typings serach tape),然后就可以在你的类中去调用它定义的方法或类。

总结

介绍了typescript的基本概念和优势,介绍了如何搭建typescript开发环境,介绍了typescript的语法和特性。

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

推荐阅读更多精彩内容