TypeScript(一)

TS

1  TypeScript快速上手

1.1  初识TS

1.1.1  介绍

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。主要提供了类型系统和对 ES6+ 的支持，它由 Microsoft 开发，代码开源于GitHub上

1.1.2  特点

（1）始于JS，归于JS

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

（2）强大的类型系统

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

（3）先进的JS

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

1.2  安装TS

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

npm i -g typescript

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

Tsc -V

2  TS常用语法

2.1  基础类型

2.1.1  布尔值

最基本的数据类型就是简单的 true/false 值（boolean）

2.1.2  数字

和 JavaScript 一样，TypeScript 里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量，TypeScript 还支持 ECMAScript 2015中引入的二进制和八进制字面量

2.1.3  字符串

JavaScript 程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样，我们使用string表示文本数据类型。 和 JavaScript 一样，可以使用双引号或单引号表示字符串

2.1.4  undefined和null

他们本身的类型用处不是很大

默认情况下null和undefined是所有类型的子类型，就是说你可以把null和undefined赋值给number类型的变量

2.1.5  数组

TypeScript 像 JavaScript 一样可以操作数组元素。 有两种方式可以定义数组

（1）在元素类型后面接上[]，表示由此类型元素组成的第一个数组：

Let list1:number[]=[1,2,3]

（2）使用数组泛型，Array<元素类型>

Let list2:Array<number>=[1,2,3]

2.1.6  元组Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素类型不必相同

Let t1:[string,number]

t1=[‘hello’,10]

t1=[10,’hello’]

2.1.7  枚举

Enum类型是对JS标准数据类型的一个补充，使用枚举类型可以为一组数值赋予友好的名字

enum Color{

Red,

Green,

Blue

}

let myColor:Color=Color.Green

默认情况下，从0开始为元素编号，你可以手动的指定成员的数值

Enum Color{red=1,green,blue}

或者全部采用手动赋值

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如，我们知道数值为 2，但是不确定它映射到 Color 里的哪个名字，我们可以查找相应的名字

2.1.8  any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any 类型来标记这些变量

let notSure:any=4

notSure=’maybe a string’

notSure=false

在对现有代码进行改写的时候,any类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。并且当你只知道一部分数据的类型时，any类型也是有用的。 比如，你有一个数组，它包含了不同的类型的数据

let list:any[]=[1,true,’free’]

list[1]=100

2.1.9  void

某种程度来说，void和any类型相反，他表示没有任何类型，当一个函数没有返回值时，你通常见到其返回值类型是void

声明一个void类型的变量没有什么大用，因为你只能为他赋予undefined和null

2.1.10  object

object表示非原始类型，也就是除number,string,boolean之外的类型

使用object类型，就可以更好地表示像object.create这样的API

2.1.11  联合类型

表示取值可以为多种类型中的一种

（1）需求1：定义一个一个函数得到数字或字符串值的字符串形式值

（2）需求2：定义一个一个函数得到一个数字或字符串值的长度

2.1.12  类型断言

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用

类型断言有两种形式，一是“尖括号”语法，二是as语法

2.1.13  类型推断

TS会在没有明确的指定类型的时候推测出一个类型 有下面2种情况:

（1）定义变量时赋值了, 推断为对应的类型.

（2）定义变量时没有赋值, 推断为any类型

2.2  接口

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口（Interfaces）来定义对象的类型。接口是对象的状态（属性）和行为（方法）的抽象描述

接口里的属性不全是必需的，有些只在某些条件下存在，或者根本不存在

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个？符号

可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误

2.2.1  只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用readonly来指定只读属性

一旦赋值后再也不能被改变了

2.2.2  函数类型

接口能够描述 JavaScript 中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型

2.2.3  类类型

与 C# 或 Java 里接口的基本作用一样，TypeScript 也能够用它来明确的强制一个类去符合某种契约

2.3  类

对于传统的 JavaScript 程序我们会使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员使用这些语法就有些棘手，因为他们用的是基于类的继承且对象是由类构建出来的。 从 ECMAScript 2015，也就是 ES6 开始， JavaScript 程序员将能够使用基于类的面向对象的方式。 使用 TypeScript，我们允许开发者现在就使用这些特性，并且编译后的 JavaScript 可以在所有主流浏览器和平台上运行，而不需要等到下个 JavaScript 版本

2.3.1  基本示例

如果你使用过 C# 或 Java，你会对这种语法非常熟悉。 我们声明一个 Greeter 类。这个类有 3 个成员：一个叫做 message 的属性，一个构造函数和一个 greet 方法

你会注意到，我们在引用任何一个类成员的时候都用了 this。 它表示我们访问的是类的成员。

后面一行，我们使用 new 构造了 Greeter 类的一个实例。它会调用之前定义的构造函数，创建一个 Greeter 类型的新对象，并执行构造函数初始化它。

最后一行通过 greeter 对象调用其 greet 方法

2.3.2  继承

在 TypeScript 里，我们可以使用常用的面向对象模式。 基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类

这个例子展示了最基本的继承：类从基类中继承了属性和方法。 这里，Dog 是一个 派生类，它派生自 Animal 基类，通过 extends 关键字。 派生类通常被称作子类，基类通常被称作超类。

因为 Dog 继承了 Animal 的功能，因此我们可以创建一个 Dog 的实例，它能够 cry() 和 run()。

2.3.3  共有，私有与受保护的修饰符

（1）默认为public

在上面的例子里，我们可以自由的访问程序里定义的成员。 如果你对其它语言中的类比较了解，就会注意到我们在之前的代码里并没有使用 public 来做修饰；例如，C# 要求必须明确地使用 public 指定成员是可见的。 在 TypeScript 里，成员都默认为 public。

你也可以明确的将一个成员标记成 public。 我们可以用下面的方式来重写上面的 Animal 类：

（2）private

当成员被标记为private时，他就不能在声明他的类的外部访问

（3）protected

protected修饰符与private修饰符的行为很相似，但有一点不同，protected成员在派生类中仍然可以访问

2.3.4  readonly修饰符

将属性设置成只读的，只读属性必须在声明时或构造函数里被初始化