TypeScript入门

一、es5、es6、TypeScript、JavaScript的区别和联系
es是客户端脚本语言的规范，es5,es6是不同的版本。javascript跟typescript是不同的脚本语言，javascript 实现了es5规范，typescript实现了es6规范。typescript慢慢的将JavaScript由一门弱语言变强，允许为变量指定类型，变得更加严谨

二、基础用法
1、编译器
（1）安装ts本地编译器

>sudo npm install -g typescript>tsc --version #检查是否安装完成

这个编译器的作用是将typescript 代码转成JavaScript代码。因为ES6规范是在2015年后发布的，而现在大部分用户的浏览器支持ES5规范，所以需要将typescript代码转换成JavaScript代码才可以在用户的浏览器中运行

（2）IDE下自动编译
打开webstorm，新建ts文件，编辑文件会出现提示Compile Ts to Js？ OK即可

2、ts字符串特性
（1）字符串模板 ${xxx}
（2）多行字符串 “
（3）自动拆分字符串
eg:

var myname = "an hai jun";var getName = function(){  return "an hai jun";}console.log(`<div>  <span>${myname}</span>  <span>${getName()}</span>  <div>xxx</div>  </div>`)function test(template,name,age){    console.log(template);    console.log(name);    console.log(age);}var myname="zs";var getAge=function(){    return 18}//用一个字符串模板去调用方法，方法会自动拆分字符串，第一个参数为整个字符串的切割，之后的参数是模板中的变量，按顺序依次排列。test`hello my name is ${myname},i'm ${getAge()}`

3、ts参数类型
（1）变量类型

var myname : string = "字符串类型"; //在下文赋值时，自动检测类型，不符则提示错误var alias : any = "赋任何类型的值"var age : number = 13;var man : boolean = true;

（2）方法类型，不需要任何返回值void

function test(name : string) : void {  //会提示错误  return "";}test(13)    //会提示错误

(3)自定义类型

class Person {  name: string;  age: number;}var zhangsan : Person = new Person();zhangsan.name = "zhangsan";zhangsan.age = "13";

（4）参数默认值

var myname:string="test"function test(a:string,b:string,c:string="test"){//c可以不传，a，b必须传}

（5）可选参数，参数后加?

function test(a: string, b?: string, c: string="test"){}test("xxx");

4、函数新特性
(1)Rest and Spread操作符 …

function fun1(...args){    args.forEach(function(arg){      console.log(arg)    })}fun1(1,2,3,4)

反过来，ES6支持，ts暂不支持

function func1(a,b,c){    console.log(a);    console.log(b);    console.log(c);}var args = [1,2]func1(...args);//输出 1 2 undefinedvar args2=[7,8,9,10,11];func1(...args2);//输出 7 8 9

(2)generator函数
函数新特性之generator函数：控制函数的执行过程，手工暂停和恢复代码执行
声明方法，在function后面另*号，

function* countAppleSales () {  var saleList = [3, 7, 5];  for (var i = 0; i < saleList.length; i++) {    yield saleList[i];  }}var appleStore = countAppleSales(); // Generator { }console.log(appleStore.next()); // { value: 3, done: false }console.log(appleStore.next()); // { value: 7, done: false }console.log(appleStore.next()); // { value: 5, done: false }console.log(appleStore.next()); // { value: undefined, done: true }//需要把方法声明成一个方法，然后再使用变量的next（）方法；//yield用来暂停，调用函数的next方法，方法才会继续执行；//value是yield后面表达式的值，done代表函数有没有完全执行完成

（3）析构表达式

①通过表达式将对象或数组拆解成任意数量的变量
eg：

function getStock(){    return{        code:"IBM",        price:100    }}var {code,price} = getStock();//等同于var stock = getStock();var code = stock.code;var price = stock.price;

变量名要一样，如果非要用别的名称可以使用：{code:codex,price}取别名的方式
如果对象中的属性又是一个对象，例如：

function getStock(){    return{        code:"IBM",        price:{            price1:200,            price2:400        }    }}

这时候，{code,price}中，price取到的就是一个对象，包含price1:200,price2:400,如果非要取其中的一个值的话，可以再使用一个析构表达式：{code,price:{price2}}就可以以取出price2的值了。如果getStock中还有其他属性，是不影响这个取值的。

②从数组中取值到本地变量

var arr1 = [1,2,3,4];var [number1,number2] = array1;//与对象的析构不同的是，数组是用[]来括起来，对象是用{}括出来，如果要拿第3个和第4个话， 这样使用[,,number1,number2]//还有一个使用方式[number1,number2,...others]表示数组中第1和第2个元素分别放到number1和number2中，剩下的，以数组的方式放到others变量中去。//析构表达式作为方法的参数：var arr1 = [1,2,3,4];function doSomething([number1,number2,...others]){console.log(number1);console.log(number2);console.log(number3);}doSomething(array1);

5、表达式与循环
（1）箭头表达式

//一行表达式var sum = (arg1,arg2) => arg1 + arg2//多行表达式，效果和以上写法等同var sum = (arg1,arg2) => {    return arg1 + arg2}//无参数var sum = () => {}//一个参数var sum = arg1 => {    console.log(arg1)}//综合例子var myArray=[1,2,3,4,5];console.log(myArray.filter(value=>value%2==0));//消除传统匿名函数的this指针问题例子function getStock(name:string){    this.name = name;    setInterval(function () {        console.log("name is:" + this.name)    },1000);}var stock = new getStock("IBM")  //打印不出this.namefunction getStock2(name:string){    this.name = name;    setInterval(()=>{        console.log("name is:" + this.name)    },1000);}var stock=new getStock2("IBM") //可以正常打印出this.name

（2）for of循环

①forEach

var myArray=[1,2,3,4];myArray.desc='four number';myArray.forEach(value=>console.log(value))//1,2,3,4  特点：忽略属性值，不能直接break;跳出循环

②for in

for(var n in myArray){    console.log(n)          //0,1,2,3,desc    console.log(myArray[n])     //1,2,3,4,'four number'}

③for of

for(var n of myArray){    console.log(n)              //1,2,3,4 特点：忽略属性值，能直接break;跳出循环}//for of循环字符串for(var n of 'four number'){    console.log(n)          //字符串中每个字符打印出来}

6、面向对象特性
（1）类
①类的声明和访问

class Person {     public aaa;//访问控制符public:默认，在类内外部可以访问    private bbb = 'b';//访问控制符private:只能在类内部可以访问    protected ccc='cc';//访问控制符protected:在类内部和类的子类中可以访问    eat() {     console.log(this.aaa+this.bbb)    }}var p1 = new Person();p1.aaa = 'a';p1.eat();

②构造函数

class Person {     constructor(public name:string) {                                   }    //等同于:    //name    //constructor(name:string) {            //this.name=name;                       //}    eat() {         console.log(this.name)    }}var p1 = new Person('hhh');p1.eat();

③类的继承

class Person {     constructor(public name:string) {                                   }       eat() {         console.log(this.name)    }}class Employee extends Person{     constructor(name:string,public code:string) {                super(name)    }    work() {         super.eat();        this.doWork();    }    private doWork() {         console.log(this.code)    }}var e1 = new Employee("name",'13');e1.work();/*用extends关键字申明继承关系，继承父类的全部属性和方法。子类在声明constructor方法时一定要加super关键字，参数为父类构造函数必须要传的参数，如无则不传。另外子类可以通过super调用父类定义的方法。*/

(2)泛型
参数化的类型，一般用来限制集合的内容
例子：

class Person {     public name;    eat() {         console.log(this.name)    }}class Employee extends Person{     constructor(name:string,public code:string) {                super()    }    work() {         super.eat();        this.doWork();    }    private doWork() {         console.log('www')        console.log(this.code)    }}var work: Array<Person> = [];       //申明work这个数字包含的数据只能是Person类型的work[0] = new Person()work[1] = new Employee('jimmy', '13')   //子类也属于父类，不会报错work[2]=1               //1不属于Person类型，会报错

（3）接口
接口：用来建立某种代码约定，使得其它开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定。

//第一种用法：interface IPerson{  name;string;  age:number;}class Person{  constructor(public config:IPerson){  }}var p1=new Person({name:"zhangsan",age:18});//必须符合接口的格式，为接口中的属性赋值//第二种用法：interface Animal{  eat();}class Sheep implements Animal{       //implements关键字代表该类实现该接口，该类必须定义接口中的方法  eat(){    console.log("i eat grass");  }}class Tiger implements Animal{  eat(){    console.log("i eat feet");  }}

(4)模块
模块可以帮助开发者将代码分割为可重用的单元。开发者可以自己决定模块中哪些资源（类、方法、变量）暴露出去供外部使用，哪些资源只在模块内使用。ts里一个文件就是一个模块。
export : 导出，对外暴露
import : 导入，引入外部资源

//eg://a.tsexport var prop1;var prop2;export function func1(){}function func2(){}export class Clazz1(){}class Clazz2(){}//b.tsimport {prop1,func1,Clazz1} from "./a";console.log(prop1)func1();new Clazz1();

（5）注解annotation
注解为程序的元素（类，方法、变量）加上更直观明了的说明，这些说明信息与程序的业务逻辑无关，而是供指定的工具或框架使用的。这一块并没有太理解，先留白

（6）类型定义文件（*.d.ts）
类型定义文件用来帮助开发者在TypeScript中使用已有的JavaScript的工具包

①类型定义文件是为了能在TS上使用JS代码库、框架而引入的以.d.ts结尾的文件。

②类型定义文件是别人配好的：https://github.com/DefinitelyTyped/DefinitelyTyped
比如使用jq ：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery/index.d.ts

③可以使用专门用来安装类型定义文件的工具：https://github.com/typings/typings