面向对象特性——接口

用来建立某种代码约定，使得其他开发者在调用某个方法或

创建新的类时必须遵循接口所定义的代码约定。

使用interface关键字定义接口；

使用implements关键字来实现接口；

接口的用法：

用法一：接口interface用于规定参数的类型（必须所有属性都具备）

用法二：实现某接口的类，必须实现该接口里的方法。

interface IPerson{

name: string;

age: number;

}

class Person{

constructor(public config: IPerson){

}

}

let p1 = new Person({

name: "张三",

age: 20

});

interface Animal{

eat();

}

//实现接口

class Sheep implements Animal{

   eat(){

    console.log("羊吃草");

   }

}

class Tiger implements Animal{

eat(){

console.log("老虎吃肉")

}

}

泛型

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

使用尖括号<>定义泛型

泛型用来指定只能放某一类型的元素，不能放其它类型的元素

eg：var workers:Array<Person> = []; 声明workers类型为数组且泛型为Person，表明workers里面只能放Person类型的数据

面向对象特性——类

类是TypeScript的核心，使用TypeScript开发时，大部分代码都是写在类里面的。使用Class关键字定义一个类。

类中包含属性和方法，而方法可以是构造方法，也可以是其他方法。

使用new关键字完成类的实例化操作。

类中属性和方法的修饰符：

public（共有的） 类内部外部都可以访问，默认是public

private（私有的） 只能在类内部访问

protected（保护的） 类内部和其子类内部可以访问

在类中，使用关键字constructor定义构造方法，这个构造方法只有类被实例化时才会被调用，而且只被调用一次，在类的外部是不能访问这个构造方法的。在构造方法中要明确声明访问控制符，有public和没有public是不一样的。

类的继承：

使用关键字extends来声明类的继承关系，子类继承父类，子类就拥有了父类的所有属性和方法。在子类中，又可以定义新的属性和方法。

在子类中，子类的构造函数必须使用super关键字来调用父类的构造函数；也可以直接使用super来调用父类的其他方法；

//循环

var myArray = [1,2,3,4,5,6,7,8,9,10];

myArray.desc = "four number";

//forEach循环

//forEach循环不支持break，它会忽略属性值

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

//for-in循环是循环对象或数据集合中的属性名字

//在JavaScript中，任何一个对象或者是一个集合都是一个键值对，

//任何一个对象或者是一个集合都是一个键值对的集合，键就是属性的名字，值就是属性的值。

//在这里myArray集中中有11个键值对，10 + 1

for(let n in myArray){

console.log(n);  

console.log(myArray[n]);  //打印值

}

//for-of循环它是循环对象或数组的值，而不是像for-in那样去循环键值对的key。

//for-of循环支持break,它会忽略属性

//for-of循环可以用到任何的对象上，比如集合，数组，字符串等

for(let m of myArray){

if(m>7) break;

console.log(m)

}

for(let s of "没有了你，我好难过"){

console.log(s);

}

箭头表达式：用来声明匿名函数，消除传统匿名函数的this指针问题

//箭头表达式用来声明匿名函数

//带参数的箭头表达式

var sum = (arg1, arg2) => { 

return arg1 + arg2;

}

//无参数的箭头表达式

var sum1 = () =>{

return 100;

}

//带一个参数的箭头表达式

var sum2 = arg1 => {

console.log(arg1)

}

var myArray = [1,2,3,4,5,6];

console.log(myArray.filter(value => value%2 == 0));

//ES5

function getStock(name: string){

this.name = name;

setInterval(function(){

console.log("name = " + this.name);

}, 1000);

}

let stock1 = new getStock("IBM");

//使用箭头表达式

function getStock2(name: string){

this.name = name;

setInterval(() => {

console.log("name = " + this.name);

}, 1000);

}

let stock2 = new getStock2("IBM");

//析构表达式从数组中取值

let array1 = [1,2,3,4,5,6,7,8];

let [number1, number2] = array1;  

let [,,number3,,, number6] = array1; 

let [,,,number4, number5] = array1; 

console.log(number1);

console.log(number2);

console.log(number3);

console.log(number6);

console.log(number4);

console.log(number5);

destructuring析构表达式

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

function getStock(){

 return {

   code:"IBM",

   price:100

 }

}

// es5的写法

var stock = getStock();

var code = stock.code;

var price = stock.price;

console.log(code);

console.log(price);

//es6的写法

var{code,price} = getStock();

console.log(code);

console.log(price);

//或者

var{code:codex, price} = getStock();

console.log(codex);

console.log(price);

// 例子

function getStock(){

 return {

   code:"IBM",

   price:{

      price1:200,

      price2:400 

  }

 }

}

var {code:codex, price:{price2}} = getStock();

console.log(codex);

console.log(price2);

//例子

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

var [number1, number2] = array1;

console.log(number1);

console.log(number2);

// 1 2

var [, , number3, number4] = array1;

console.log(number3);

console.log(number4);

// 3 4

var [number1, number2, ...others] = array1;

console.log(others);

// 3 4 

//例子

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

function doSomething([number1, number2, ...others]){

  console.log(number1);

  console.log(number2);

  console.log(others);

}

// 1 2 , 3 4

generator函数:控制函数的执行过程，手动暂停和恢复代码执行（ES6规范，ts暂不支持）

关键字yield，并在函数声明时在函数名前面使用"*",其效果相当于给函数打断点,在函数调用时通过声明成一个变量，使用next();掉用一次，执行到一个yield

eg:function* dosomething(){

      console.log("start");

      yield;

      consle.log("finish"); 

   };

var fn=dosomething();

fn.next();

fn.next();

rest and spread操作符

1.用在函数参数中，可以接受任意数量数的参数

function func1(...args){//args是个数组，可以接受任意数量参数

}

func1(1,2,3)

func2(3,4,5,6)

2. 可以将一个数组转化为参数列表

function func1(a, b, c) {

}

var args = [1,2,3]

func1(...args);

//定义带默认值的参数以及可选参数

//定义可选参数，在参数的后面加上？即可

function addStr1(str1:string, str2?:string, str3:string = "我爱你啊"){

console.log(str1 +","+ str2 +","+  str3)

return str1 +","+ str2 +","+  str3;

}

//调用方法

document.body.innerHTML = addStr1("没有了你","万杯觥筹只不过是提醒寂寞罢了")

document.body.innerHTML = addStr1("亲爱的","没有了你","万杯觥筹只不过是提醒寂寞罢了")

document.body.innerHTML = addStr1("爱江山更爱美人")

参数后使用“？”指定可选参数，指定后需进行空值判断。

可选参数和默认参数要在必选参数后面

可选参数 b?:string。可选参数没传时，默认为undefined

当有可选参数时，需要处理没有可选参数时的情况

//给方法的参数指定默认值

//带默认值的参数，只能放到参数列表的后面

function addStr(str1:string, str2:string, str3:string = "我爱你啊"){

console.log(str1 +","+ str2 +","+  str3)

return str1 +","+ str2 +","+  str3;

}

//调用方法

document.body.innerHTML = addStr("没有了你","万杯觥筹只不过是提醒寂寞罢了")

document.body.innerHTML = addStr("亲爱的","没有了你","万杯觥筹只不过是提醒寂寞罢了")

参数新特性

TypeScript支持的基本数据类型有：布尔值（boolean）、数字（number）、字符串（string）、数组（[ ]）、元组Tuple、枚举（enum）、any、void、null、undefined、never、object。

//定义字符串变量

let myName: string = "刘豆豆";

//定义数字类型

let age = 20;  //类型推断

let num: number = 1000;

//定义any类型

let alias: any = "12345";

//定义boolean类型

let man: boolean = true;

console.log(myName, age, alias, man)

//定义字符串类型方法

function test(name: string): string{

return "Hello, " + name;

}

//调用方法

document.body.innerHTML = test("刘豆豆")

//自定义类型Person类型

class Person{

name: string;

age: number;

}

var zhangsan: Person = new Person();

zhangsan.name = "张三";

zhangsan.age = 22;

document.body.innerHTML = zhangsan.name + "-" + zhangsan.age

var myname="没有了你，万杯觥筹只不过是提醒寂寞罢了";

var getName = function(){

return myname;

}

//表达式${}

console.log(`hello ${myname}`);  

console.log(`hello ${getName()}`);

//多行字符串/字符串模板

console.log(`

       <div>

          <span>${myname}</span>

          <span>${getName()}</span>

          <dic>xxxx</div>

       </div>

`)

function test(template, name, age){

console.log(template);

console.log(name);

console.log(age);

}

var userName = "刘豆豆";

var getAge = function(){

return 22;

}

//字符串自动拆分

test`我叫： ${userName}, 我今年：${getAge()}`