ECMA Script 5 是由 JavaScript 所实现的,而 TypeScript 则是遵循 ECMA Script 6,ES6 的很多新特性及语法都能直接在 TypeScript 中实现,因为 ES6 就是由 TypeScript 所实现的,而我们所熟悉的 Angular 2 也是使用 TypeScript 开发的
TypeScript 开发环境
目前大多数浏览器仅支持 ES5,还没有完全支持 ES6,所以我们需要把 TypeScript 代码编辑成 ES5 的 JavaScript 代码,在这里给大家提供两种的编译方式,一种是使用 Online Complier,链接戳 >>>TypeScript Playground
而另一种方式就是使用本地 Complier,通过 Node.js 包管理器 npm 安装 TypeScript 的 npm 包,然后我们就可以在编辑器中编译 TypeScript 文件了,尽管有很多的 IDE 都能写 TS,但最好的开发工具还是微软开发的 VS Code,快捷键 Control
` 打开终端,键入以下命令即可完成安装
字符串新特性
TypeScript 支持与 JavaScript 几乎相同的数据类型,而在 TypeScript 中,字符串增加了多行字符串、模板字符串、自动拆分字符串的新特性
在 JavaScript 中,字符串换行将会报错,而 TypeScript 引入了多行字符串的新特性,所以在字符串中换行,将不会引起报错,但需要注意的是,字符串需要使用反引号 ,而不是使用
"或
'`号
模板字符串可以定义多行文本以及内嵌表达式,同样的,模板字符串也需要使用反引号 ,并以
${ expr }`这种形式嵌入表达式
多行字符串和模板字符串的结合
自动拆分字符串,当你使用字符串模板调用方法的时候,其字符串模板表达式里的值会赋给自动调用方法的参数
参数新特性
我们接下来介绍 TypeScript 中的五种类型声明,分别是字符串 String、数字 Number、布尔值 Boolean、多种类型 Any、没有类型 Void,只需在参数名称后面用冒号来指定参数的类型即可
还有一种自定义类型,我们可通过 class 模板来定义我们所需要的类型
我们刚刚是通过在变量声明的时候指定了默认的参数,同样的,我们在调用方法传参时,也能同样使用等号来指定参数的默认值,不过需要注意的是,声明默认值的参数要放在最后
在方法的参数声明后面用问号来标明此参数为可选参数,如function niangao(a: string, b?: number, c: string = "Niangao") {}
那么在该方法中,参数 b 就是可选的,在调用的时候就可以不传 b 参数,在使用可选参数时,需要注意可选参数没传的情况,还需要注意的是,在参数的顺序中,必选参数不可以在可选参数的后面,也就是说,可选参数要么放在最后,要么后面接可选参数,或有带默认值的参数
函数新特性
Rest and Spread 操作符 ...
:用来声明任意数量的方法参数
Rest and Spread 操作符还有一个反过来的用法,虽然在 Complier 中有会报错提示,但却是能够成功运行的
第一次调用,由于方法定义的 3 个参数,而 args 长度为 2,所以调用后方法中第 3 个为 undefine,第二次调用,由于方法只有 3 个参数,args1 长度为 4,所以最后一个参数被忽略了
Generator 函数:控制函数的执行过程,手工暂停和恢复代码执行,通过使用 yield 关键字,来实现函数暂停,通过 .next() 的方法来使函数恢复执行
Destructuring 析构表达式:通过表达式将对象或数组拆解成任意数量的变量
需要注意的是,对象的析构表达式是用{}
括出来,而数组则是使用[]
括起来的
箭头表达式
箭头表达式是用来声明匿名函数,消除传统匿名函数的 this 指针问题
for of 循环
在 JavaScript 中,我们使用的循环一般是forEach
以及for in
,我们依旧是先通过代码来看看这两种循环的特点
forEach
循环将数组中的所有元素都打印了出来,但没有打印数组描述,接下来我们看下for in
循环
这里只是输出数组的索引(即键名),若是想要打印出数组元素及描述内容,我们可以通过打印 myArrayn 这种方式来输出
TypeScript 中引入了一种新的循环方式—— for of 循环,直接上代码
可以看到,同样是console.log(n);
,for in
遍历的是数组的所引,而for of
遍历的是数组元素值,除此之外,for of
还能根据某个条件终止循环,其余两者均不能终止
此外,for of 循环还能循环字符串