基本特性

字符串新特性

• 多行字符串（类似es6的字符串模板）

• 字符串模板（同上）

• 自动拆分字符串

参数的新特性

参数的类型

• 在参数名称后面使用冒号来指定参数的类型：声明方式var/let variable:type；

• 声明变量类型后编译器会检查变量赋值类型。编译后类型变化不会报错。

• 参数的特性 
  

  • 类型推断机制：首次赋值时判断变量类型。

// 定义一个变量，并且指定他的类型var myname:string ='zhai liang'// 如果在指定变量类型后，赋了一个错误的类型，那么就会报错myname = 13;// 报错// 类型推断机制：如果第一次给变量赋值后，默认了变量了类型var myname = 'aiaii';myname = 13;// 报错// 如果希望变量不限制类型，那么指定为any型var alias:any = 'xixi'

- 方法返回值除了可以声明为基本类型外，也可以声明为void，表示没有返回值。方法的参数也可以声明类型。

// viod：声明函数不需要返回值 function test(name:string):viod{alert('此函数不需要返回值')}

• 自定义类型

class Person(){name: String;age: number;}var zhangsan:Person = new Person();// 此时的zhangshan就会有两个属性

默认参数

• 在参数声明后面用等号来指定参数的默认值；

• 给方法的变量指定默认值

function test(a:string,b:string,c:string='jojo'){}// 带默认值的参数需要放在整个参数的后面

可选参数

• 在方法的参数声明后面用问号来标明此参数为可选参数

function test(a:string,b?:string,c:string='jojo'){}

函数新特性

Rest and Spread操作符

• 用来声明任意数量参数的方法

function test(...args){args.forEach(function(arg){console.log(arg)})}test(1,2,3,4); //1,2,3,4test(5,6); //5,6// 或者function test(a,b,c){console.log(a,b,c)}var args = [7,8,9,10]test(...args);// 7,8,9var args1 = [1,2]test(...args1);// 1,2,undefined

generator函数

• 控制函数的执行过程，手工暂停和回复代码执行；

// generator函数声明*function* doSomething(){console.log('start');// 关键字yieldyield;console.log('finish')}// 调用doSomething(); // 错误// 正确调用var func = doSomething();func.next();// 自动买股票function* getStockPrice(stock){// 无限循环，每次循环的时候都会停一下while(true){yield Math.random()*100  //关键字yield 会返回当前语句的值，类似于return。但在生成器函数中,return受到使用限制。}}var priceGenerator = getStockPrice('IBM');var limitPrice = 15;var price = 100;// 判断价格是否低于15while(price>limitPrice){// 大于15时，走一下生成器，重新赋值price// 当price一旦小于15，那么就将停止执行生成器price = priceGenerator.next().value;console.log(`返回${price}`)}console.log('----')

destructuring析构表达式

• 通过表达式将对象或数组拆解成任意数量的变量；

// 对象或者函数的析构function getStock(){return {code: 'IBM',price: 100}}var stock = getStock();var code = stock.code;var price = stock.price;// 等价于var {code,price} = getStock()// 结果console.log(code); // 'IBM'console.log(price); // 100// 也可以重命名var {code:codex, price} = getStock()console.log(codex,price) // 'IBM' 100// 如果函数返回的是一个对象，可以取出对象中的某个值function getStock(){return {code: 'IBM',price: {price1: 200,price2: 400},aaa: 'X',bbb:'hahhaha'}}var {code:codex,price:{price2}} = getStock()console.log(codex,price2) // "IBM" 400// 数组的析构var array1 = [1,2,3,4];var [number1,number2] = array1console.log(number1,number2) // 1,2var [,,number3,number4] = array1console.log(number3,number4) // 3,4var [number1,number2,...other] = array1console.log(other) // [3,4]// 复杂点的var array1 = [1,2,3,4];function doSomething([number1,number2,...other]){console.log(number1); //1console.log(number2); //2console.log(other); //[3,4]}doSomething(array1)

表达式与循环

箭头表达式

• 用来生命匿名函数，消除传统匿名韩树的this指针问题；

• 类似js的es6语法；

of循环

• forEach(),for in,for of

• for of类似于forEach，但是和forEach不同的是，它是可以中断的。

高级特性

面向对象特性

类

• 访问控制符 
  

  • public：内外部都可访问。在属性没有指定访问控制符时就会默认为public。

  • private：内不可访问，外部不可访问

  • protected：内部和子类可访问，外部不可访问

• 构造函数(constructor)：在类被实例化的时候会被调用，而且只会被调用一次。

• super关键字 
  

  • 子类的构造函数必须调用父类的构造函数，使用super(父类构造函数名称)；

  • 调父类的其他方法，使用super.来进行调用。

泛型(generic)

• 参数化的类型，一般用来限制集合的内容

// 需要一种方法使返回值的类型与传入参数的类型是相同的// 本来定义function identity(arg: any): any {return arg;}// 使用any类型会导致这个函数可以接收任何类型的arg参数，这样就丢失了一些信息：传入的类型与返回的类型应该是相同的。如果我们传入一个数字，我们只知道任何类型的值都有可能被返回。// 泛型定义function identity<T>(arg: T): T {return arg;}// 给identity添加了类型变量T。 T帮助我们捕获用户传入的类型（比如：number），之后我们就可以使用这个类型。 之后我们再次使用了 T当做返回值类型。// 把这个版本的identity函数叫做泛型，因为它可以适用于多个类型。 不同于使用 any，它不会丢失信息，像第一个例子那像保持准确性，传入数值类型并返回数值类型。

接口(interface)

• 用来建立某种代码约定，是的其他开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定。

// 定义一个接口interface IPerson{name:string,age:number}class Person{// 定义一个类，类中的构造函数，要求传入的都是IPerson作为其参数constructor(public config: IPerson){}}// 传入的参数必须是IPersonvar p1=new Person({// 接口中的属性都得有，否则会报错name:'zhangsan',age:18})

模块

• 模块可以帮助开发者将代码分割成可重用的单元。开发者可以自己决定将模块中的哪些资源（类，方法，变量）暴露出去供外部使用，哪些资源只在模块内使用。

• 模块是自声明的；两个模块之间的关系是通过在文件级别上使用imports和exports建立的。imports是引用，exports是暴露。

注解(annotation)

• 注解为程序的元素（类、方法、变量）加上更直观更明了的说明，这些说明信息与程序的业务逻辑无关，而是供指定的工具或框架使用的。

类型定义文件（*.d.ts）

• 类型定义文件用来帮助开发者在TypeScript中使用已有的js工具包，如jQuery。

循环 有 forEach 、for in、 for of 三种方式； 1、forEach 只会输出数组内容，不会输出数组描述，如下： var myArry=[1,2,3,4,5]; myArry.desc = 'this is a arry'; myArry.forEach(item => console.log(item)); //forEach 只输出数组内容1,2,3,4,5 for ( var item in myArry){ console.log(item ); } //for in 输出数组所有的索引，包括描述：0,1,2,3,4,desc for ( var n of myArry){ if(n > 3)break; console.log(n ); } //for of 根据某个条件可以终止循环，其余两者均不能终止

学完就可以学习angular6了

typescript 是微软开发的一门编程语言，是Javascript的一个超集，遵循最新的ES6脚本语言规范，扩展了JavaScript语法。angular2框架本身就是由typescript语言编写的。

一个文件就是一个模块  方便引用

export 导出文件中的一切方法，类等；被其他的文件引用

import则不会被其他的文件引用

TS的优势？

1. 完全支持ES6规范

2. 可以对变量及参数做类型检查，减少编写代码的错误

3. 语法提示

4. 重构优势，例：当我修改一个变量时，项目中的其他应用该变量的位置也会相应修改

5. angular2的开发语言
   

1.类型检查  2.语法提示  3.更好的学习anguler框架

访问装饰符只在ts中做代码检查用,编译之后是没有作用的,private的属性依然可以被访问到

TypeScript编辑器

作用:将TypeScript代码编译成Javascript代码

*由于ES6规范是2015年发布的,因此很多浏览器器并不能进行识别,因此所有遵循ES6语法的客户端脚本语言其编写的代码都需要转换成ES5规范的Javascript代码.

在线compiler编译器:http://www.typescriptlang.org/play/index.html

本地compiler编译器:

1.npm工具(Node.js自带的命令行工具,因此需要下载node.js)

安装后使用npm install -g typescript命令安装typescript编译器

安装后编译器路径:C:\Users\ZHUANGHAOTANG\AppData\Roaming\npm\node_modules\typescript\bin\tsc

*会自动配置好npm、tsc的环境变量

编写ts文件

export class HelloWorld{

private name : string;

    constructor(){

        this.name = "hi~";

    }

}

使用tsc命令对ts文件进行编译,编辑后生成js文件.

2.使用webstorm ide自带TypeScript插件

在webstrom中编写的ts文件都自动会编译成js文件.

TypeScript

微软开发的编程语言

是JavaScript脚本语言的超集

遵循ES6脚本语言规范.

增加了类型约束和基于类的面向对象编程的设计.

是Angular的开发语言

TypeScript的优势

（1）支持ES6规范

（2）强大的IDE支持

（3）Angular2的开发语言

IDE优势

1、类型检查

2、语法提示

3、方便文件名、变量名修改

//类的定义

class Person { 

    //类的访问控制符(public、 private、protect.)是控制类的属性和方法是否可以在类的外部被访问到。

    //默认的是public.public的属性和方法在类的内部和外部都可以被访问到。

    //private 属性和方法只能在类的内部被访问

    //protect属性和方法可以在类的内部和类的子类中被访问到，类的外部也不能被访问到。

    //类的构造函数是类的一个特殊的方法，这个方法只有类被实例化的时候才被调用，而且只调用一次。外部没法访问这个构造函数。

    //只有类被new实例化时被调用。实例化几次被调用几次。

    

    // constructor() { 

    //     console.log("haha");

    // }

    //构造函数的作用，比如实例化一个人时必须指定名字。实例化时必须指定名字，否则报错

      //name; 在这里默认是public，但是在构造函数中使用这个变量要明确声明访问控制符的。

    constructor(public name: string) {//声明了一个name属性，eat()可以调用。 

          console.log("haha");

        this.name = name;

      

    }

  

    eat() {

        //console.log(this.name);

        console.log("im eating");

     }

}

//类可以理解成一个模型，实例化是做成真正的产品，类的实例化是通过new关键字完成的.同样的一个类可以

//new出多个实例，实例拥有相同的属性和方法，但是状态不同。

var p1 = new Person("batman");//实例化一个人时必须指定名字。

//p1.eat();

//p1.name = "batman";

var p2 = new Person("superman");//实例化一个人时必须指定名字。

//p2.eat();

//p2.name = "superman";

//类的继承，两个关键字extends和super,super用来调用父类的构造函数或方法。

class Exployee extends Person {

   //Exployee类继承了Person类的所有的属性和方法

   //子类也可以指定新的属性和方法

    code: string;

    work() { 

        //console.log("im working");

        //调用父类的其他方法

        super.eat();

        this.doWork();

    }

    private doWork() { 

        console.log("im woring");

    }

  //super可以用来调用父类的构造函数或方法

    constructor(name: string, code: string) { 

        super(name);//构造员工类的时候，必须要调用父类的构造函数，否则报错。

        console.log("xixi");

        this.code = code;

       

    }

}

 //Exployee类继承了Person类的所有的属性和方法

var e1 = new Exployee("zhy","1");

// e1.eat();

e1.work();

//泛型，参数化的类型，一般用来限制集合的内容。指定数组只能放某一类型的内容

//这里规定这个数组的泛型是Person，只能放Person的内容

var array1: Array<Person> = [];

array1[0] = new Person("zhangsan");

array1[1] = new Exployee("lisi", "2");//继承自Person

array1[2] = 2;//报错

var array1 = [1, 2, 3, 4];

array1.des = "hello world!";//在编辑器中会报错

//forEach循环会把属性des忽略掉；不能break

array1.forEach(value => console.log(value));

//for in 循环的是数组元素键值对的键的名字

for (var n in array1) {

    console.log(array1[n]);

}

//for of循坏的是数组元素的值，会把自定义的des属性忽略，这个循坏是可以被打断的

for (var m of array1) {

    if (m > 2) break;

    console.log(m);

}

//for of 是可以用在任何对象上的，比如map,集合，数组，setset，也可以用在字符串上。

for (var p of "my name is zhy") {    

    console.log(p);

}

interface接口用法：1.用于类的构造函数中参数的类型声明 2.在类中实现接口中声明的方法

接口：用来建立某种代码约定，使得其它开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定。 第一种用法： 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"); } }