Type Script 的基本概念及常用语法

Unsplash

TypeScript 是一种由微软开发的自由和开源的编程语言，它作为 JavaScript 的一个超集，扩展了JavaScript 的语法，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程，使得这一门脚本语言有了编译的概念

ECMA Script 5 是由 JavaScript 所实现的，而 TypeScript 则是遵循 ECMA Script 6，ES6 的很多新特性及语法都能直接在 TypeScript 中实现，因为 ES6 就是由 TypeScript 所实现的，而我们所熟悉的 Angular 2 也是使用 TypeScript 开发的

1. TypeScript 开发环境

目前大多数浏览器仅支持 ES5，还没有完全支持 ES6，所以我们需要把 TypeScript 代码编辑成 ES5 的 JavaScript 代码，在这里给大家提供两种的编译方式，一种是使用 Online Complier，链接戳 >>>TypeScript Playground

而另一种方式就是使用本地 Complier，通过 Node.js 包管理器 npm 安装 TypeScript 的 npm 包，然后我们就可以在编辑器中编译 TypeScript 文件了，尽管有很多的 IDE 都能写 TS，但最好的开发工具还是微软开发的 VS Code，快捷键 Control + ` 打开终端，键入以下命令即可完成安装

TypeScript 安装过程

2. 字符串新特性

TypeScript 支持与 JavaScript 几乎相同的数据类型，而在 TypeScript 中，字符串增加了多行字符串、模板字符串、自动拆分字符串的新特性

在 JavaScript 中，字符串换行将会报错，而 TypeScript 引入了多行字符串的新特性，所以在字符串中换行，将不会引起报错，但需要注意的是，字符串需要使用反引号 ` ，而不是使用 " 或 ' 号

多行字符串 运行结果

模板字符串可以定义多行文本以及内嵌表达式，同样的，模板字符串也需要使用反引号 `，并以 ${ expr } 这种形式嵌入表达式

模板字符串 运行结果

多行字符串和模板字符串的结合

多行字符串和模板字符串 运行结果

自动拆分字符串，当你使用字符串模板调用方法的时候，其字符串模板表达式里的值会赋给自动调用方法的参数

自动拆分字符串 运行结果

3. 参数新特性

我们接下来介绍 TypeScript 中的五种类型声明，分别是字符串 String、数字 Number、布尔值 Boolean、多种类型 Any、没有类型 Void，只需在参数名称后面用冒号来指定参数的类型即可

参数类型

还有一种自定义类型，我们可通过 class 模板来定义我们所需要的类型

自定义类型

我们刚刚是通过在变量声明的时候指定了默认的参数，同样的，我们在调用方法传参时，也能同样使用等号来指定参数的默认值，不过需要注意的是，声明默认值的参数要放在最后

默认参数 运行结果

在方法的参数声明后面用问号来标明此参数为可选参数，如 function niangao(a: string, b?: number, c: string = "Niangao") {} 那么在该方法中，参数 b 就是可选的，在调用的时候就可以不传 b 参数，在使用可选参数时，需要注意可选参数没传的情况，还需要注意的是，在参数的顺序中，必选参数不可以在可选参数的后面，也就是说，可选参数要么放在最后，要么后面接可选参数，或有带默认值的参数

可选参数 运行结果

4. 函数新特性

Rest and Spread 操作符 ...：用来声明任意数量的方法参数

Rest and Spread 操作符 运行结果

Rest and Spread 操作符还有一个反过来的用法，虽然在 Complier 中有会报错提示，但却是能够成功运行的

Rest and Spread 操作符反过来的用法

第一次调用，由于方法定义的 3 个参数，而 args 长度为 2，所以调用后方法中第 3 个为 undefine，第二次调用，由于方法只有 3 个参数，args1 长度为 4，所以最后一个参数被忽略了

运行结果

Generator 函数：控制函数的执行过程，手工暂停和恢复代码执行，通过使用 yield 关键字，来实现函数暂停，通过 .next() 的方法来使函数恢复执行

Generator 函数 运行结果

Destructuring 析构表达式：通过表达式将对象或数组拆解成任意数量的变量

Destructuring 析构表达式 对象_1 Destructuring 析构表达式 对象_2 运行结果

需要注意的是，对象的析构表达式是用 {}括出来，而数组则是使用 [] 括起来的

Destructuring 析构表达式 数组_1 运行结果 Destructuring 析构表达式 数组_2 运行结果 Destructuring 析构表达式 数组_3 Destructuring 析构表达式 数组_4 运行结果

5. 箭头表达式

箭头表达式是用来声明匿名函数，消除传统匿名函数的 this 指针问题

箭头表达式_1 箭头表达式_2 箭头表达式_3 箭头表达式_4 运行结果 箭头表达式_5 运行结果

6. for of 循环

在 JavaScript 中，我们使用的循环一般是 forEach 以及 for in，我们依旧是先通过代码来看看这两种循环的特点

forEach 循环 运行结果

forEach 循环将数组中的所有元素都打印了出来，但没有打印数组描述，接下来我们看下 for in 循环

for in 循环 运行结果

这里只是输出数组的索引（即键名），若是想要打印出数组元素及描述内容，我们可以通过打印 myArray[n] 这种方式来输出

运行结果

TypeScript 中引入了一种新的循环方式—— for of 循环，直接上代码

for of 循环_1 运行结果

可以看到，同样是 console.log(n);，for in 遍历的是数组的所引，而 for of 遍历的是数组元素值，除此之外，for of 还能根据某个条件终止循环，其余两者均不能终止

for of 循环_2 运行结果

此外，for of 循环还能循环字符串

for of 循环_3 运行结果

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^