TypeScript手记（一）

初识TS

TypeScript 作为 JavaScript 语言的超集，它为 JavaScript 添加了可选择的类型标注，大大增强了代码的可读性和可维护性。同时，它提供最新和不断发展的 JavaScript 特性，能让我们建立更健壮的组件。

TypeScript 主要有 3 大特点：

- 始于JavaScript，归于JavaScript

TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中。

- 强大的工具构建大型应用程序

类型允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。

类型是可选的，类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软件组件之间的接口和洞察现有 JavaScript 库的行为。

- 先进的 JavaScript

TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。

这些特性为高可信应用程序开发时是可用的，但是会被编译成简洁的 ECMAScript3（或更新版本）的JavaScript。

TS的安装

命令行运行如下命令，全局安装 TypeScript：

1npm install -g typescript  

安装完成后，在控制台运行如下命令，检查安装是否成功(3.x)：

1tsc -V 

第一个TS程序

在编辑器里新建greeter.ts文件 添加一些代码

1function greeter (person) {
2  return 'Hello, ' + person
3}
4
5let user = 'Yee'
6
7console.log(greeter(user))

我们使用了 .ts的扩展名，但是这段代码只是js而已。

在终端上运行TypeScript编译器：

tsc greeter.ts

输出结果为一个同名的js文件，它包含了和输入文件中相同的js代码。我们可以通过node命令执行这个js,得到相应的结果。

类型注解

类型注解

接下来让我们看看 TypeScript 工具带来的高级功能。给 person 函数的参数添加 : string 类型注解，如下：

1function greeter (person: string) {
2  return 'Hello, ' + person
3}
4
5let user = 'Yee'
6
7console.log(greeter(user))

TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式。在这个例子里，我们希望 greeter 函数接收一个字符串参数。然后尝试把 greeter 的调用改成传入一个数组：

1function greeter (person: string) {
2  return 'Hello, ' + person
3}
4
5let user = [0, 1, 2]
6
7console.log(greeter(user))

重新编译，你会看到产生了一个错误：

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

类似地，尝试删除 greeter 调用的所有参数。TypeScript 会告诉你使用了非期望个数的参数调用了这个函数。在这两种情况中，TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。

要注意的是尽管有错误，greeter.js 文件还是被创建了。就算你的代码里有错误，你仍然可以使用 TypeScript。但在这种情况下，TypeScript 会警告你代码可能不会按预期执行。

接口

接口可以理解为一种规范。

让我们继续扩展这个示例应用。这里我们使用接口来描述一个拥有 firstName 和 lastName 字段的对象。在 TypeScript 里，只在两个类型内部的结构兼容，那么这两个类型就是兼容的。这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements 语句。

 1interface Person { //用interface来定义接口
 2  firstName: string
 3  lastName: string
 4}
 5
 6function greeter (person: Person) {
 7  return 'Hello, ' + person.firstName + ' ' + person.lastName
 8}
 9
10let user = {
11  firstName: 'Yee',
12  lastName: 'Duan'
13}
14
15console.log(greeter(user))

此时传入到greeter函数的参数必须要满足Person接口的格式，也就是说greeter函数的参数规范是Person接口。在后面的学习中还会有更多的接口的应用。

类

最后，让我们使用类来改写这个例子。TypeScript 支持 JavaScript 的新特性，比如支持基于类的面向对象编程。

让我们创建一个 User 类，它带有一个构造函数和一些公共字段。因为类的字段包含了接口所需要的字段，所以他们能很好的兼容。

还要注意的是，我在类的声明上会注明所有的成员变量，这样比较一目了然。

 1class User {
 2  fullName: string
 3  firstName: string
 4  lastName: string
 5
 6  constructor (firstName: string, lastName: string) {
 7    this.firstName = firstName
 8    this.lastName = lastName
 9    this.fullName = firstName + ' ' + lastName
10  }
11}
12
13interface Person {
14  firstName: string
15  lastName: string
16}
17
18function greeter (person: Person) {
19  return 'Hello, ' + person.firstName + ' ' + person.lastName
20}
21
22let user = new User('Yee', 'Huang')
23
24console.log(greeter(user))

重新运行 tsc greeter.ts，你会看到 TypeScript 里的类只是一个语法糖，本质上还是 JavaScript 函数的实现。

本记总结

通过以上的例子可以对TS有一个大致的了解，如果有接触过后端的如java语言经历可能会对接口 类有比较深刻的理解。下一记我将会总结基本的TS语法。在学习完基础的语法知识后，我将结合Axios的原理，结合TS重新构建Axiox，期待~