typescript是微软开发的一个javascript的一个超集。支持es6规范。它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。
es是客户端脚本的规范，es5，es6是这些规范的不同版本。JavaScript与typescript是两种客户端脚本语言，JavaScript实现了es5规范，typescript实现了es6规范。
搭建typescript开发环境
NPM 安装 TypeScript：npm install -g typescript
（NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题）
安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码：tsc -v
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
第一个typescript文件：hello.ts内容如下
export class Hello{}
在命令执行tsc hello.ts会生成一个hello.js文件
typescript特性：
1.多行字符串：
var a=`sdfasd fs adf`
2.字符串新特性：
var myname="aaaa";
var myfunc=function(){
return "ssdsdfsdf";
}
console.log(`<div>
<span>${myname}</span>
<p>${myfunc()}</p>
</div>`); //注意不是单引号
3.自动拆分字符串
下面例子用字符串模板调用函数
function test(str,name,age){
console.log(str);
console.log(name);
console.log(age);
}
var name1='aaaa';
var getage=function (){
return 22;
}
test`adfasdfsdfs adf${name1}sdf${getage()}sadf`
参数类型的新特性：
声明参数指定类型：var str1: string = "hello";
也可以不声明类型，typescript会自动根据值腿短类型 var str1 = "hello";
可以为变量设置一个any类型，这样这个变量可以设置成任何类型，既可以是字符串也可以是数字
其他常用数据类型实例：
var age: number = 18; var man: boolean = true;
//设置函数的参数类型及返回值类型 function aaa(name: string, age:number=18): string { return 'sdf'; }
//设置空返回值的函数 function bbb(name: string): void { alert(234); }
//自定义类型 class Person { name: string; age: number; } var p1 = new Person(); p1.name = "zhang san"; p1.age = 18;
函数的可选参数与默认值参数：在参数名后面加"?"表示这个参数是可选参数，可选参数与默认值参数都要在必填参数后面
function aaa(name: string,xueli?:string,age:number=18): string { return 'sdf'; }
用Rest and Spread操作符声明任意数量参数的方法：
function func1(...args) { args.forEach(function (arg) { console.log(arg); }) }
func1(1, 2, 3);
func1(5,6,7,8,9,3)
//Rest and Spread操作反过来使用(注意目前typescript并不支持这种方法，但是生成的js可以正常使用)
function fun2(a,b,c) { console.log(a); console.log(b); console.log(c); console.log("=================="); }
var parame1 = [1, 2]; var parame2 = [3, 4, 5, 6, 7, 8]; fun2(...parame1); fun2(...parame2);
generator函数：控制函数的执行过程，手工暂停或恢复代码执行
function* aaa() { console.log("aaa"); yield; console.log("bbb"); }
var fun1 = aaa(); fun1.next(); fun1.next();
注意generator函数需要在声明函数的function后面添加*号，使用generator函数时候需要复制给一个变量。需要使用next执行下一步
析构表达式：通过表达式将对象或数组拆解成任意数量的变量
针对对象的析构表达式：
function getdata() { return { aaa: "zhang san", age: 100, zzz: { z1: 10, z2:20 }, yyyy: 888, } }
//以前调用方法 var data1 = getdata(); var name1 = data1.aaa; var age1 = data1.age; console.log(name1); console.log(age1); console.log("====");
//新的获取方式 var { aaa, age } = getdata(); console.log(aaa); console.log(age);
注意{}中的参数名要和方法名一致，否则需要用下面方法映射下
var { aaa: xxx, age, zzz: {z1}} = getdata(); console.log(xxx); console.log(age); console.log(z1);
zzz: {z1}能获取到zi的值
针对数组的析构表达式：
var array1 = [1, 2, 3, 4]; var [num1, num2] = array1;//获取的是1，2 var [,,num3, num4] = array1;//获取的是3，4 var [num5, num6, ...other] = array1; //other是一个数组，里面的值是3，4
var array1 = [1, 2, 3, 4]; function diyfunc([num1,num2,...other]) { console.log(num1); console.log(num2); console.log(other); }
diyfunc(array1);
箭头表达式：用来声明匿名函数，消除传统匿名函数的this指针问题
var sum = (arg1, arg2) => arg1 + arg2;
var sum = (arg1, arg2) => { return arg1 + arg2; }
var sum = function (arg1, arg2) { return arg1 + arg2; }; 上面三种方法是等价的
//无参箭头表达式声明的一个方法 var sum =()=>{ console.log(231123); }
//只有一个参数的箭头表达式声明的一个方法 var sum =arg1=>{ console.log(arg1); }
//箭头函数实例：打印数组中的偶数 var myarray = [1, 2, 3, 4, 5, 6]; console.log(myarray.filter(aaa => aaa % 2 == 0)); //filter用于对数组元素进行过滤。
//箭头函数this用法 function bbb(name: string) { this.name = name; setTimeout(() => { console.log("name is " + this.name); },1000) } bbb('aaa');
//箭头函数forEach（注意这个不支持break） var array1 = [1, 2, 3, 4]; array1.forEach(val=>console.log(val));
传统for in以及for of var array1 = [1, 2, 3, 4]; for (var n in array1) { //n从0开始 console.log(n+"==="+array1[n]); }
for (var n of array1) { //n从1开始 console.log(n+"==="+array1[n]); } for of可以适用于对象，数组，字符串等很多地方
typescript类：
class Person {
constructor() { //构造方法 console.log('xxxx'); }
public name; age
run() { console.log(this.name+" is running"); } } var p1 = new Person(); p1.name = "zhang san"; p1.run();
实例：
class Person {
public name; constructor(name:string) { //构造方法 this.name = name; }
run() { console.log(this.name+" is running"); } } var p1 = new Person('zhang san'); p1.run();
//上面这个实例可以简写为
class Person { constructor(public name:string) { //构造方法 this.name = name; } run() { console.log(this.name+" is running"); } } var p1 = new Person('zhang san'); p1.run();
类的继承:
class Person { constructor(public name:string) { //构造方法 this.name = name; } eat() { console.log(this.name+" is eat"); } run() { console.log(this.name+" is running"); } }
class Employee extends Person{ constructor(name:string,code:string) { //子类声明构造方法必须调用父类的构造方法 super(name); } code: string; work() { super.eat(); console.log(this.name+" is working"); } } var e1 = new Employee('xiao li','101'); e1.work();
泛型：参数化的类型，一般用于限制集合的内容
var workers: Array<Person> = []; workers[0] = new Person("wk1"); workers[2] = new Employee("wk2","102");
接口的两种用法：
接口的继承方法：
interface Animal { run(); } class Dog implements Animal { run() {//类必须继承接口的方法 console.log("eat grass"); } }
将接口作为某个类的某个方法参数的验证
interface Person { name: string; age: number; }
class wker{ constructor(public config:Person) { console.log("xxx"); } } var p1 = new wker({ name: "xing ming", age:20 });
模块：可以帮助开发者将代码分割为可重用的单元。一个ts文件就可以看做是一个模块
模块常用的两个关键字：export对外暴露什么方法，import导入某个模块
实例：
a.ts代码：
export var v1; var v2; export function func1() { } function func2() { } export class clas1 { } class clas2 { }
b.ts代码：引入了a.ts
import {v1,func1,clas1} from "./a"; console.log(v1); func1(); var aaa = new clas1();
注解：为程序的元素(类，方法，变量)添加更直观的说明，提供给工具或者框架使用的
类型定义文件(xxx.d.ts)：帮助开放着在typescript中使用已有的JavaScript的工具，例如jquery
类型定义文件如何获取：
1.访问github/DefinitelyTyped下载
2.npm i typings --global //下载typings工具并用这个工具进行安装你想要工具
