关于TypeScript
TypeScript是JavaScript的超集，主要提供类型系统和对ES6的支持，由Microsoft开发，第一个版本发布于2012
TypeScript的优势
-
TypeScript增加了代码的可读性和可维护性- 大部分的函数函数看看类型的定义就已经知道该如何使用了
- 可以在编译的阶段就发现了大量的错误，防止在运行中发现过多的错误
- 增强了编辑器和
IDE的功能。
-
TypeScript非常的包容-
TypeScript是JavaScript的超集，.js文件可以直接将名字转换为.ts即可 - 即使不显式的定义类型，也可以自动的做出类型的推论
- 可以定义从简单到复杂的一切类型
- 即使
TypeScript编译报错，也可以生成JavaScript文件
-
TypeScript的劣势
- 需要一定的学习成本，需要理解接口(
Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等前端工程师不是很熟悉的东西，而且现阶段的中文资料也不是很多 - 短期内可能增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期进行维护的额项目。
TypeScript能够减少维护的成本 - 集成到构建流程需要一定的工作量
- 可能和一些库结合的并不是很完美
原始数据类型
对于前端开发来说，主要的类型可以 分成两部分：原始数据类型和对象类型。原始数据类型包括：布尔值，数值，字符串，null，undefined以及ES6中的新类型symbol。现在我们主要看一下这些原始值在TypeScript中的应用。
布尔值
布尔值是最基本的数据类型，在TypeScript中，使用Boolean定义布尔值类型：
let isTrue:boolean = false;
// 可以通过编译
// 对于后面来说，没有特殊强调错误代码片段，就默认为编译通过了。
注意一下，使用构造函数Boolean创建的对象不是布尔值：
let createdByNewBoolean : boolean = new Boolean(1);
// index.ts(1,5): error TS2322: Type 'Boolean' is not assignable to type 'boolean'.
上面代码报错的原因是new Boolean()返回一个Boolean对象：
let createdByNewBoolean : Boolean= new Boolean(1);
直接调用Boolean也可以返回一个 boolean 类型：
let createdByBoolean: boolean = Boolean(1);
在TypeScript中，boolean 是 JavaScript中的基本类型，而Boolean 是 JavaScript 中的构造函数。其他基本类型（除了 null和 undefined）一样，不再赘述。
数值
使用nubmber定义数值类型：
let decLiteral:number=6;
let hexLiteral:number = 0xf00d;
let binaryLiteral:number = 0b1010; // ES6中的二进制表示法
let octalLiteral:number =0o744;// ES6中的八进制表示法
let notNumber:number =NaN;
let infinityNumber:number = Infinity;
上面的编译的结果是什么：
var decLiteral = 6;
var hexLiteral = 0xf00d;
var binaryLiteral = 10;
var octalLiteral= 484;
var notNumber = NaN;
var infinityNumber = Infinity;
其中0b1010 和 0o744 是ES6 中的二进制和八进制表示法，它们会被编译为十进制数字。
字符串
使用string定义字符串类型：
// 普通字符串
let myName:string = 'kim';
let myAge:number = 25;
// 模板字符串
let sentence:string = `Hello,my name is ${myName}.
I'll be ${myAge + 1} years old next month`;
编译结果：
var myName = 'kim';
var myAge = 25;
// 模板字符串
let sentence = "Hello,my name is"+myName+".\nI'will be"+(myAge+1)+"years old next month";
空值
JavaScript没有空值(void)的概念，在TypeScript中，可以用void表示没有任何返回值的函数。
function akertName():void{
alert('My name is kim');
}
声明一个void类型变量是没有什么用，因为我们只能将它赋值为undefined和null:
let unusable:void = undefined
Null和undefined
在TypeScript中，可以使用null和undefined来定义这两个原始数据类型：
let u:undefined = undefined;
let n:null = null;
undefined只能赋值为undefined，null只能赋值为null。但是这二者和void还是有区别的，null和undefined是所有类型的子类型，也就是说undefined类型的变量，可以赋值给number类型的变量：
//这样写也是没有问题的
let num:number =undefined;
let u: undefined;
let num: number = u;
但是void的类型并不是这样的，不能讲void类型的变量不能赋值给number类型的变量：
let u: void;
let num: number = u;
//index.ts(2,5): error TS2322: Type 'void' is not assignable to type 'number'.
任意值
任意值（Any）用来表示允许赋值为任意类型。
什么是任意值类型
如果是一个普通类型，在赋值过程中改变类型是不被允许的:
let myFavoriteNumber:string ='seven';
myFavoriteNumber = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
但如果是 any 类型，则允许被赋值为任意类型。
let myFavoriteNumber : any ='seven';
myFavoriteNumber = 7;
任意值的属性和方法
在任何值上访问任何属性都是允许的：
let anyThing :any = 'hello';
console.log(anyThing.myName);
console.log(anyThing.myName.firstName);
也允许调用任何方法：
let anyThing : any = 'kim';
anyThing.setName('Tom');
anyThing.setName('Tom').sayHello();
anyThing.myName.setFirstName('kim');
可以认为，声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。
未声明类型的变量
变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：
let something;
something = 'seven';
something = 7;
something.setName('kim');
上面的代码等价于：
let something:any;
something = 'seven';
something = 7;
something.setName('kim');
类型推论
如果没有明确的字段，那么TypeScript会依照类型推论的规则判断出一个类型。
下面的代码虽然没有指定类型，但是会在编译的时候报错：
let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
上面的代码等价于：
let myFavoriteNumber:string = 'seven';
myFavoriteNumber = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
但是为什么这和any类型的还是有区别的，二者的区别在于在声明的时候没有赋值的话，就会判断成any类型，在后续就不会再进行检查。
联合类型
联合类型表示取值可以为多种类型中的一种。
让我们先举个小栗子：
let myFavoriteNumber:string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
上面的例子说明myFavoriteNumber可以是string类型或是number类型的。但是如果我们给这个值给一个布尔值，就会报错。
let myFavoriteNumber:string | number;
myFavoriteNumber = true;
// index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
// Type 'boolean' is not assignable to type 'number'.
联合类型使用 | 分隔每个类型。
这里的string|number的意思是，允许myFavoriteNumber的类型是string或是number，但是不能是其他类型。
访问联合类型的属性或方法
当TypeScript不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性和方法：
function getLength(something: string | number): number {
return something.length;
}
// index.ts(2,20): error TS2339: Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number'.
上例中，length 不是string 和 number 的共有属性，所以会报错。
访问 string 和 number 的共有属性是没问题的：
function getString(something:string | number):string{
return something.toString();
}
联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型：
let myFavoriteNumber:string|number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错
// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.
上例中，第二行的 myFavoriteNumber被推断成了 string，访问它的length属性不会报错。
而第四行的myFavoriteNumber 被推断成了 number，访问它的 length属性时就报错了。
对象的类型 -- 接口
在TypeScript中，我们使用接口来定义对象的类型。
什么是接口
在面向对象的语言中，接口是一个很重要的概念，他是对行为的抽象，而具体如何行动需要类去实现。TypeScript中的接口就是一个很灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对【对象的形状】进行描述。
简单的例子：
interface Person{
name:string;
age:number;
}
let kim:Person={
name:'kim',
age:18
}
在上面的例子中我们定义了一个接口Person，接着定义可一个变量kim，它的类型是person，这样，我们就约束了kim的形状和接口Person一致。
接口一般首字母大写。
接口的变量比接口少一些或是多一些属性是不允许的：
interface Person {
name: string;
age: number;
}
let kim: Person = {
name: 'kim',
};
// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
// Property 'age' is missing in type '{ name: string; }'.
interface Person {
name: string;
age: number;
}
let kim: Person = {
name: 'kim,
age: 25,
website: 'http://kim.com',
};
// index.ts(9,3): error TS2322: Type '{ name: string; age: number; website: string; }' is not assignable to type 'Person'.
// Object literal may only specify known properties, and 'website' does not exist in type 'Person'.
可选属性
有的时候我们希望不要完全匹配成一个形状，那么我们可用一些可选属性：
interface Person {
name: string;
age?: number;
}
let kim: Person = {
name: 'kim',
};
let kimi: Person = {
name: 'kimi',
age:28
};
可选属性的意思就是这个属性的值可以是不存在的，但是在这种情况下依旧不允许添加未定义的属性，我们在下面举个栗子：
let Tom: Person = {
name: 'Tom',
age:28,
website:'http://www.baidu.com',
};
// examples/playground/index.ts(9,3): error TS2322:
// Type '{ name: string; age: number; website: string; }' is not assignable to type 'Person'.
// Object literal may only specify known properties, and 'website' does not exist in type 'Person'.
任意属性
有的时候我们希望几口允许任意的属性，可以使用如下的方式:
interface Person{
name:string;
age?:number;
[propName:string]:any;
}
let kim :Person ={
name:'kim',
website:'http://www.baidu.com',
};
我们对于上面的代码进行解析，使用[propName:string]定义了任意属性取string类型的值。但是需要注意的是，一旦定义了任意属性，那么确定属性和可选属性都必须是它的子属性：
interface Person{
name:string;
age?:number;
[propName:string]:string;
}
let kim :Person ={
name:'kim',
age:25,
website:'http://www.baidu.com',
}
// index.ts(3,3): error TS2411:
//Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5):
//error TS2322: Type '{ [x: string]: string | number; name: string; age: number; website: string; }' is not
//assignable to type 'Person'.
// Index signatures are incompatible.
//Type 'string | number' is not assignable to type 'string'.
//Type 'number' is not assignable to type 'string'.
上例中，任意属性的值允许是 string，但是可选属性 age 的值却是number，number 不是string的子属性，所以报错了。
另外，在报错信息中可以看出，此时 { name: ‘Xcat Liu’, age: 25, website: ‘http://xcatliu.com’ } 的类型被推断成了 { [x: string]: string | number; name: string; age: number; website: string; }，这是联合类型和接口的结合。
只读属性
有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用readonly定义只读属性：
interface Person {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}
let xcatliu: Person = {
id: 89757,
name: 'kim',
website: 'http://www.baidu.com',
};
xcatliu.id = 9527;
// index.ts(14,9): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.
上面的id属性是只读属性，id在初始化之后，又被赋值了，所以会报错。只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候。
interface Person {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}
let xcatliu: Person = { // 没有给id进行赋值
name: 'Xcat Liu',
website: 'http://xcatliu.com',
};
xcatliu.id = 89757; // 错误
// index.ts(8,5): error TS2322: Type '{ name: string; website: string; }' is not assignable to type 'Person'.
// Property 'id' is missing in type '{ name: string; website: string; }'.
// index.ts(13,9): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.
数组的类型
[类型+方括号]表示法
最简单的方法是使用[类型+方括号]来标识数组：
let arr:number[] =[1,2,3,4,5]
数组的项中不允许出现其他的类型：
let arr:number[] =[1,'2',3,4,5];
//index.ts(1,5): error TS2322: Type '(number | string)[]' is not assignable to type 'number[]'.
//Type 'number | string' is not assignable to type 'number'.
//Type 'string' is not assignable to type 'number'.
现在的[1,'2',3,4,5]的类型被推断称为(number|string)[],这个是联合类型和数组的结合。
let arr2: number[] = [1,2,3,4,5,6,7];
arr2.push('8')
//index.ts(2,16): error TS2345: Argument of type 'string' is
//not assignable to parameter of type 'number'.
数组泛型
也可以使用数组泛型（Generic） Array<elemType> 来表示数组：
let arr3: Array<number> = [1, 1, 2, 3, 5];
用接口表示数组
接口也可以用来描述数组：
interface NumberArray{
[index:number]:number;
}
let arr4 : NumberArray=[1,1,2,3,4];
NumberArray 表示：只要 index 的类型是 number，那么值的类型必须是 number。
any 在数组中的应用
一个比较常见的做法是，用any表示数组中允许出现任意类型：
let list : any[] =['kim',25,{website:'www.baidu.com'}];
类数组
类数组不是数组类型，比如arguments：
function sum(){
let args:number[] = arguments;
}
// index.ts(2,7): error TS2322: Type 'IArguments' is not assignable to type 'number[]'.
// Property 'push' is missing in type 'IArguments'.
事实上常见的类数组都有自己的接口定义，如 Arguments,NodeList, HTMLCollection 等：
function sum() {
let args: IArguments = arguments;
}
函数的类型
函数的声明
在JavaScript中，有两种常见的定义函数的方式--函数声明（Function Declaration）和函数表达式（Function Expression）：
// 函数声明（Function Declaration）
function sum (x,y){
return x+y;
}
//函数表达式（Function Expression）
let mySum = function （x,y）{
return x + y;
}
一个函数有输入和输出，要在TypeScript中对齐进行约束，需要把输入和输出都考虑到，其中函数声明的类型定义比较简单：
function sum (x:number,y:number):number{
return x+y;
}
但是输出多余的(或少于要求)参数，是不被允许的：
function sum (x:number,y:number):number{
return x+y;
}
sum (1,2,3);
// index.ts(4,1): error TS2346: Supplied parameters do not match any signature of call target.
sum (1);
//index.ts(4,1): error TS2346: Supplied parameters do not match any signature of call target.
函数表达式
如果我们现在想要写一个函数表达式的定义，我们可能会这样写：
let muSum = function(x:number,y:number):number{
return x+y;
}
这个是可以通过编译的，但是在事实上，上面的代码只对等号右侧的匿名行数进行了类的定义，而等号左侧的mySum，是通过赋值操作对类型进行推断出来的。如果需要我们手动给mySum添加类型，代码应该只这样写的：
let mySum:(x number,y:number) =>number = function (x:number,y:number):number{
return x+y;
}
在TypeScript的类型定义中，=>用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型，应用是十分广泛的。
接口中函数的定义
我们也可以使用接口的当时来定义一个函数需要符合的形象：
interface SearchFunc{
(source:string,subString:string):boolean
}
let mySearch : SearchFunc;
mySearch = function (source:string,subString:string){
return source.search(subString) !== -1;
}
可选参数
前面，输入多余的(或是少于要求的)的参数，是不被允许的，那么怎么定义可选的参数呢？与接口中的可选属性相似，也是使用？表示可选参数：
function buildName(firstName: string, lastName?: string) {
if (lastName) {
return firstName + ' ' + lastName;
} else {
return firstName;
}
}
let kimXue= buildName('Xcat', 'Xue');
let kim= buildName('kim');
需要注意的是，可选参数必须接在必需参数后面。换句话说，可选参数后面不允许再出现必须参数了：
function buildName(firstName?: string, lastName: string) {
if (firstName) {
return firstName + ' ' + lastName;
} else {
return lastName;
}
}
let kimXue= buildName('Xcat', 'Xue');
let kim= buildName('kim');
// index.ts(1,40): error TS1016: A required parameter cannot follow an optional parameter.
上面的代码会报错，因为在first那么这个属性的后面还有必须的属性，因此报错。
参数默认值
在ES6中，我们允许给函数的参数添加默认值，TypeScript会将添加了默认值的参数识别为可选参数：
function buildName(firstName: string, lastName: string = 'Xue') {
return firstName + ' ' + lastName;
}
let kimXue= buildName('Xcat', 'Xue');
let kim= buildName('kim');
此时就不受「可选参数必须接在必需参数后面」的限制了：
function buildName(firstName: string = 'kim', lastName: string) {
return firstName + ' ' + lastName;
}
let kimXue= buildName('Xcat', 'Xue');
let kim= buildName('kim');
剩余参数
ES6中，可以使用...rest的方式获取函数中的剩余参数(rest参数)：
function push(array,...items){
items.forEach(function (item){
array.push(item);
})
}
let a = [];
push(a,1,2,3);
事实上，items是一个数组，所以我们可以用数组的类型去定义它：
function push(array:any[],...items:any[]){
items.forEach(function (item){
array.push(item);
})
}
let a = [];
push(a,1,2,3);
和上面的代码一样，rest参数只能是最后一个参数。
重载
重载允许一个函数接受不同数量或是类型的参数，并作出不同的处理。
比如，我们需要实现一个函数reverse，输入数字123的时候，输出的就是数字321，输入字符串‘hello’的时候，输出翻转的字符串‘olleh’，利用联合类型，我们可以这么实现：
function reverse(x: number | string): number | string {
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''));
} else if (typeof x === 'string') {
return x.split('').reverse().join('');
}
}
然而这样写的话，还是有一个缺点，就是不能够精确地表达，输入为数字的时候，输出的也应该是数字，输入为字符串的时候，输出也应该为字符串。这时，我们可以用重载来实现多个这样的函数：
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''));
} else if (typeof x === 'string') {
return x.split('').reverse().join('');
}
}
类型断言
类型断言可以用来绕过编译器的类型判断，手动指定一个值的类型。
语法
<类型>值
// 或
值 as 类型
// 在TSX语法 (React的JSX语法的TS版）中必须用后一种
例子：将一个联合类型的变量指定为一个更加具体的类型
当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：
function getLength(something: string | number): number {
return something.length;
}
//index.ts(2,20): error TS2339: Property 'length' does not exist on type 'string | number'.
//Property 'length' does not exist on type 'number'.
这样的时候我们就需要使用类型断言，现将something断言成string：
function getLength(something: string | number): number {
if ((<string>something).length) {
return (<string>something).length;
} else {
return something.toString().length;
}
}
类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的：
function toBoolean(something: string | number): boolean {
return <boolean>something;
}
// index.ts(2,10): error TS2352: Type 'string | number' cannot be converted to type 'boolean'.
// Type 'number' is not comparable to type 'boolean'.
声明文件
当我们使用第三方库时，我们需要引用它的声明文件：
声明语法
当我们使用第三方库，比如jQuery，我们通常这样获取一个id是foo元素：
$('#foo');
// or
jQuery('#foo');
但是在 TypeScript 中，我们并不知道$ 或jQuery是什么东西。这时，我们需要使用 declare关键字来定义它的类型，帮助 TypeScript 判断我们传入的参数类型对不对。
declear var jQuery:(string) =>any;
jQuery('#foo');
declare 定义的类型只会用于编译时的检查，编译结果中会被删除。
声明文件
通常我们会把类型声明放在一个单独的文件中，这就是声明文件：
// jQuery.d.ts
declare var jQuery: (string) => any;
我们约定声明文件以.d.ts为后缀。
然后在使用到的文件的开头，用「三斜线指令」表示引用了声明文件：
/// <reference path="./jQuery.d.ts" />
jQuery('#foo');
