TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。
TypeScript 由微软开发的自由和开源的编程语言。
TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。
语言特性
TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：
- 类型批注和编译时类型检查
- 类型推断
- 类型擦除
- 接口
- 枚举
- Mixin
- 泛型编程
- 名字空间
- 元组
- Await
以下功能是从 ECMA 2015 反向移植而来：
- 类
- 模块
- lambda 函数的箭头语法
- 可选参数以及默认参数
JavaScript 与 TypeScript 的区别
TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。
1、TypeScript 基础语法
TypeScript 程序由以下几个部分组成：
- 模块
- 函数
- 变量
- 语句和表达式
- 注释
Runoob.ts 文件代码：
consthellostring"Hello World!"console.log(hello)
tsc Runoob.tsRunoob.js 文件代码：
varhello"Hello World!"; console.log(hello);
整个流程如下图所示：
TypeScript 区分大写和小写字符。
2、TypeScript 基础类型
TypeScript 包含的数据类型如下表:
数据类型 | 关键字 | 描述 |
任意类型 | any | 声明为 any 的变量可以赋予任意类型的值。 |
数字类型 | number | 双精度 64 位浮点值。它可以用来表示整数和分数。 |
字符串类型 | string | 一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。 |
布尔类型 | boolean | 表示逻辑值：true 和 false。 |
数组类型 | 无 | 声明变量为数组。 |
元组 | 无 | 元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。 |
枚举 | enum | 枚举类型用于定义数值集合。 |
void | void | 用于标识方法返回值的类型，表示该方法没有返回值。 |
null | null | 表示对象值缺失。 |
undefined | undefined | 用于初始化变量为一个未定义的值 |
never | never | never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。 |
注意：TypeScript 和 JavaScript 没有整数类型。
Any 类型
任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型，它常用于以下三种情况。
1、变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查，示例代码如下：
let x: any = 1; // 数字类型
x = 'I am who I am'; // 字符串类型
x = false; // 布尔类型Null 和 Undefined
null
在 JavaScript 中 null 表示 "什么都没有"。
null是一个只有一个值的特殊类型。表示一个空对象引用。
用 typeof 检测 null 返回是 object。
undefined
在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
3、TypeScript 变量声明
变量是一种使用方便的占位符，用于引用计算机内存地址。
我们可以把变量看做存储数据的容器。
TypeScript 变量的命名规则：
- 变量名称可以包含数字和字母。
- 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
- 变量名不能以数字开头。
类型推断
当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。
如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。
varnum2; //console.log("num 变量的值为 "+num); num"12"; //console.log(num);
- 第一行代码声明了变量 num 并=设置初始值为 2。 注意变量声明没有指定类型。因此，程序使用类型推断来确定变量的数据类型，第一次赋值为 2，num 设置为 number 类型。
- 第三行代码，当我们再次为变量设置字符串类型的值时，这时编译会错误。因为变量已经设置为了 number 类型。
变量作用域
变量作用域指定了变量定义的位置。
程序中变量的可用性由变量作用域决定。
TypeScript 有以下几种作用域：
- 全局作用域 − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
- 类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
- 局部作用域 − 局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。
var global_num = 12 // 全局变量
class Numbers {
num_val = 13; // 实例变量
static sval = 10; // 静态变量
storeNum():void {
var local_num = 14; // 局部变量
}
}
console.log("全局变量为: "+global_num)
console.log(Numbers.sval) // 静态变量
var obj = new Numbers();
console.log("实例变量: "+obj.num_val)4、TypeScript 运算符
TypeScript 主要包含以下几种运算：
- 算术运算符
- 逻辑运算符
- 关系运算符
- 按位运算符
- 赋值运算符
- 三元/条件运算符
- 字符串运算符
- 类型运算符
5、TypeScript 条件语句
条件语句
通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 TypeScript 中，我们可使用以下条件语句：
- if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
- if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
- if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
var num:number = 2
if(num > 0) {
console.log(num+" 是正数")
} else if(num < 0) {
console.log(num+" 是负数")
} else {
console.log(num+" 不是正数也不是负数")
}6、TypeScript 循环
语法
语法格式如下所示：
for ( init; condition; increment ){
statement(s);
}下面是 for 循环的控制流程解析：
- init 会首先被执行，且只会执行一次。这一步允许您声明并初始化任何循环控制变量。您也可以不在这里写任何语句，只要有一个分号出现即可。
- 接下来，会判断 condition。如果为 true，则执行循环主体。如果为 false，则不执行循环主体，且控制流会跳转到紧接着 for 循环的下一条语句。
- 在执行完 for 循环主体后，控制流会跳回上面的 increment 语句。该语句允许您更新循环控制变量。该语句可以留空，只要在条件后有一个分号出现即可。
- 条件再次被判断。如果为 true，则执行循环，这个过程会不断重复（循环主体，然后增加步值，再然后重新判断条件）。在条件变为 false 时，for 循环终止。
for...in 循环
for...in 语句用于一组值的集合或列表进行迭代输出。
语法
语法格式如下所示：
for (var val in list) {
//语句
}var num = 5;
var i;
var factorial = 1;
for (i = num; i >= 1; i--) {
factorial *= i;
}
console.log(factorial);7、TypeScript 函数
函数定义
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
语法格式如下所示：
function function_name()
{
// 执行代码
}// 函数定义
function greet():string { // 返回一个字符串
return "Hello World"
}
function caller() {
var msg = greet() // 调用 greet() 函数
console.log(msg)
}
// 调用函数
caller()
function add(x: number, y: number): number {
return x + y;
}
console.log(add(1,2))
Lambda 函数
Lambda 函数也称之为箭头函数。
箭头函数表达式的语法比函数表达式更短。
TypeScript
varfoo(x:number)=>10x
console.log(foo(100))//输出结果为 110
8、TypeScript Number
TypeScript 与 JavaScript 类似，支持 Number 对象。
Number 对象是原始数值的包装对象。
语法
var num = new Number(value);console.log("TypeScript Number 属性: ");
console.log("最大值为: "Number.MAX_VALUE);
console.log("最小值为: "Number.MIN_VALUE);
console.log("负无穷大: "Number.NEGATIVE_INFINITY);
console.log("正无穷大:"Number.POSITIVE_INFINITY);
9、TypeScript String（字符串）
String 方法
下表列出了 String 对象支持的方法：
序号 | 方法 & 描述 | 实例 |
1. | charAt() 返回在指定位置的字符。 | |
2. | charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 | |
3. | concat() 连接两个或更多字符串，并返回新的字符串。 | |
4. | indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。 | |
5. | lastIndexOf() 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。 | |
6. | localeCompare() 用本地特定的顺序来比较两个字符串。 | |
7. | match() 查找找到一个或多个正则表达式的匹配。 | |
8. | replace() 替换与正则表达式匹配的子串 | |
9. | search() 检索与正则表达式相匹配的值 | |
10. | slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。 | |
11. | split() 把字符串分割为子字符串数组。 | |
12. | substr()
从起始索引号提取字符串中指定数目的字符。 | |
13. | substring() 提取字符串中两个指定的索引号之间的字符。 | |
14. | toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射。 | |
15. | toLocaleUpperCase() 据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射。 | |
16. | toLowerCase() 把字符串转换为小写。 | |
17. | toString() 返回字符串。 | |
18. | toUpperCase() 把字符串转换为大写。 | |
19. | valueOf() 返回指定字符串对象的原始值。 | |
10、TypeScript Array(数组)
TypeScript
varsites:string[]; sites["Google","Runoob","Taobao"]
console.log(sites[0]);
console.log(sites[1]);
Array 对象
我们也可以使用 Array 对象创建数组。
Array 对象的构造函数接受以下两种值：
- 表示数组大小的数值。
- 初始化的数组列表，元素使用逗号分隔值。
TypeScript
vararr_names:number[]newArray(4)
for(vari0; i<arr_names.length; i++){
arr_names[i]i2
console.log(arr_names[i])
}
数组方法
下表列出了一些常用的数组方法：
序号 | 方法 & 描述 | 实例 |
1. | concat() 连接两个或更多的数组，并返回结果。 | |
2. | every() 检测数值元素的每个元素是否都符合条件。 | |
3. | filter() 检测数值元素，并返回符合条件所有元素的数组。 | |
4. | forEach() 数组每个元素都执行一次回调函数。 | 编译成 JavaScript 代码： |
5. | indexOf() 搜索数组中的元素，并返回它所在的位置。 如果搜索不到，返回值 -1，代表没有此项。 | |
6. | join() 把数组的所有元素放入一个字符串。 | |
7. | lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。 | |
8. | map() 通过指定函数处理数组的每个元素，并返回处理后的数组。 | |
9. | pop() 删除数组的最后一个元素并返回删除的元素。 | |
10. | push() 向数组的末尾添加一个或更多元素，并返回新的长度。 | |
11. | reduce() 将数组元素计算为一个值（从左到右）。 | |
12. | reduceRight() 将数组元素计算为一个值（从右到左）。 | |
13. | reverse() 反转数组的元素顺序。 | |
14. | shift() 删除并返回数组的第一个元素。 | |
15. | slice() 选取数组的的一部分，并返回一个新数组。 | |
16. | some() 检测数组元素中是否有元素符合指定条件。 | |
17. | sort() 对数组的元素进行排序。 | |
18. | splice() 从数组中添加或删除元素。 | |
19. | toString() 把数组转换为字符串，并返回结果。 | |
20. | unshift()
向数组的开头添加一个或更多元素，并返回新的长度。 | |
11、TypeScript Map 对象
创建 Map
TypeScript 使用 Map 类型和 new 关键字来创建 Map：
let myMap = new Map();初始化 Map，可以以数组的格式来传入键值对：
let myMap = new Map([
["key1", "value1"],
["key2", "value2"]
]);
Map 相关的函数与属性：
- map.clear() – 移除 Map 对象的所有键/值对 。
- map.set() – 设置键值对，返回该 Map 对象。
- map.get() – 返回键对应的值，如果不存在，则返回 undefined。
- map.has() – 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
- map.delete() – 删除 Map 中的元素，删除成功返回 true，失败返回 false。
- map.size – 返回 Map 对象键/值对的数量。
- map.keys() - 返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
- map.values() – 返回一个新的Iterator对象，包含了Map对象中每个元素的值 。
let nameSiteMapping = new Map();
// 设置 Map 对象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
// 获取键对应的值
console.log(nameSiteMapping.get("Runoob")); // 2
// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao")); // true
console.log(nameSiteMapping.has("Zhihu")); // false
// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size); // 3
// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob")); // true
console.log(nameSiteMapping);
// 移除 Map 对象的所有键/值对
nameSiteMapping.clear(); // 清除 Map
console.log(nameSiteMapping);
let nameSiteMapping = new Map();
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
// 迭代 Map 中的 key
for (let key of nameSiteMapping.keys()) {
console.log(key);
}
// 迭代 Map 中的 value
for (let value of nameSiteMapping.values()) {
console.log(value);
}12、TypeScript 元组
我们知道数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。
元组中允许存储不同类型的元素，元组可以作为参数传递给函数。
创建元组的语法格式如下：
var tuple_name = [value1,value2,value3,…value n]varmytuple[10,"Runoob"];
// 创建元组
console.log(mytuple[0])
console.log(mytuple[1])
元组运算
我们可以使用以下两个函数向元组添加新元素或者删除元素：
- push() 向元组添加元素，添加在最后面。
- pop() 从元组中移除元素（最后一个），并返回移除的元素。
13、TypeScript 联合类型
联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。
注意：只能赋值指定的类型，如果赋值其它类型就会报错。
创建联合类型的语法格式如下：
Type1|Type2|Type3var val:string|number
val = 12
console.log("数字为 "+ val)
val = "Runoob"
console.log("字符串为 " + val)
function disp(name:string|string[]) {
if(typeof name == "string") {
console.log(name)
} else {
var i;
for(i = 0;i<name.length;i++) {
console.log(name[i])
}
}
}
disp("Runoob")
console.log("输出数组....")
disp(["Runoob","Google","Taobao","Facebook"])14、TypeScript 接口
接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。
TypeScript 接口定义如下：
interface interface_name {
}interface IPerson {
firstName:string,
lastName:string,
sayHi: ()=>string
}
var customer:IPerson = {
firstName:"Tom",
lastName:"Hanks",
sayHi: ():string =>{return "Hi there"}
}
console.log("Customer 对象 ")
console.log(customer.firstName)
console.log(customer.lastName)
console.log(customer.sayHi())
var employee:IPerson = {
firstName:"Jim",
lastName:"Blakes",
sayHi: ():string =>{return "Hello!!!"}
}
console.log("Employee 对象 ")
console.log(employee.firstName)
console.log(employee.lastName)
单继承实例
interface Person {
age:number
}
interface Musician extends Person {
instrument:string
}
var drummer = <Musician>{};
drummer.age = 27
drummer.instrument = "Drums"
console.log("年龄: "+drummer.age)
console.log("喜欢的乐器: "+drummer.instrument)15、TypeScript 类
TypeScript 是面向对象的 JavaScript。
类描述了所创建的对象共同的属性和方法。
TypeScript 支持面向对象的所有特性，比如 类、接口等。
TypeScript 类定义方式如下：
class class_name {
// 类作用域
}定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：
- 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
- 构造函数 − 类实例化时调用，可以为类的对象分配内存。
- 方法 − 方法为对象要执行的操作。
class Car {
// 字段
engine:string;
// 构造函数
constructor(engine:string) {
this.engine = engine
}
// 方法
disp():void {
console.log("函数中显示发动机型号 : "+this.engine)
}
}
// 创建一个对象
var obj = new Car("XXSY1")
// 访问字段
console.log("读取发动机型号 : "+obj.engine)
// 访问方法
obj.disp()
class Shape {
Area:number
constructor(a:number) {
this.Area = a
}
}
class Circle extends Shape {
disp():void {
console.log("圆的面积: "+this.Area)
}
}
var obj = new Circle(223);
obj.disp()16、TypeScript 对象
对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等，如下实例：
var object_name = {
key1: "value1", // 标量
key2: "value",
key3: function() {
// 函数
},
key4:["content1", "content2"] //集合
}
var sites = {
site1: "Runoob",
site2: "Google",
sayHello: function () { } // 类型模板
};
sites.sayHello = function () {
console.log("hello " + sites.site1);
};
sites.sayHello();17、TypeScript 模块
TypeScript 模块的设计理念是可以更换的组织代码。
模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。
两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。
模块使用模块加载器去导入其它的模块。 在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。
此外还有有 SystemJs 和 Webpack。
模块导出使用关键字 export 关键字，语法格式如下：
//exportinterfaceSomeInterface{//}
要在另外一个文件使用该模块就需要使用 import 关键字来导入:
importsomeInterfaceRefrequire("./SomeInterface");
18、TypeScript 声明文件
TypeScript 作为 JavaScript 的超集，在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题，需要将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件了。
假如我们想使用第三方库，比如 jQuery，我们通常这样获取一个 id 是 foo 的元素：
$('#foo');
// 或
jQuery('#foo');但是在 TypeScript 中，我们并不知道 $ 或 jQuery 是什么东西：
jQuery('#foo');
// index.ts(1,1): error TS2304: Cannot find name 'jQuery'.
