Typescript

1.0 课程介绍

1）typescript好处
2）安装typescript开发环境
3）Typescript概念，语法和特性

1.2 Typescript优势

1）支持ES6规范
2）强大的IDE支持：
    1）类型检查：变量类型设置
    2）语法提示
    3）重构
3）angular2的开发语言

1.3 搭建环境：

1）compiler 类似babel的编译器

1.4 字符串新特性

字符串

多行字符串
字符串模版
自动拆分字符串

function test(template,name,age) {
    console.log(template)
    console.log(name)
    console.log(age)
}
var myname = "lei lei";
var age = function () {
    return 28;
};
test`我的名字是 ${myname} ,我的年龄是${age()}`

1.5 参数的新特性

给变量声明类型
- 字符串类型的变量 var myName: string = "leilei"
- TypeScript类型推断机制，所以如果想设置任意数据类型,可以用:any
```
var ymy:any = 'hahha'
ymy = 12233;
```
- 其他类型值：
  :number :boolean
给方法声明类型
void：代表不要返回值
```
function test():void{
    return
}
```

给参数声明类型

function test(name:string){
    return
}

自定义类型

class Person{
    name:string;
    age:number;
}

参数新特性；给方法的参数设置默认值，带默认值的参数必须设置在最后面

function test(a:string,b:string,c:string="ymy") {
    console.log(a)
    console.log(b)
    console.log(c)
}
test('haha','xixi')

可选参数，问好?代表可选参数
注意：可选参数必须在"必选参数"的后面；

function test(a:string,b?:string,c:string="ymy") {
    console.log(a)
    console.log(b)
    console.log(c)
}
test('haha')

1.6 函数新特性

Rest and Spread 操作符;
- 声明可传任意数量的参数
```
function  func(...ary){}
```
- 把任意长度的数组，转成固定长度的方法的参数的调用
```
var ary=[1,2]
function  func(a,b,c){}
func(...ary);//相当于从左往右一个个的赋值
```

generator函数：
控制函数的执行过程，手工暂停和恢复代码执行
用*号来定义一个generator函数；用yield来暂停函数，用next()来让重续执行下一次；

function* getBreadPrice(bread){
  while(true){
    yield Math.random()*100
  }
}
var breadPrice=getBreadPrice('yellowBread');
var limitPrice=15;
var price = 100;
while(price >  limitPrice){
  price=breadPrice.next().value;
  console.log(price)
}
console.log(`my Bread price is : ${price}`)

1.7 析构表达式等同解构赋值

从对象中拆出本地的变量

//注意：likes中eat的解构
function getObj(){
  return {
    name:'ymy',
    age:18,
    likes:{
      eat:12,
      sleep:98
      }
  }
}
var {name,age,likes:{eat}}=getObj()
console.log(eat)

从数组总拆出变量

var ary=[1,2,3,4]
var [a,,b]=ary;//中间不想获取的变量，可以用","代替
console.log(b)
//也可以写成   var [a,b,...others]=ary;

也可以把数组作为参数，比如：
var ary=[1,2,3,4] function fn([a,b,...others]){ } //调用 fn(ary);

1.8表达式和循环

箭头表达式： var sum=(arg1,arg2)=>arg1+arg2

//拿出偶数
var ary=[1,2,3,4,5,6]
console.log(ary.filter(val=>val%2==0))

消除传统异步中，this关键字带来的问题；
循环：for...of
- 只循环数组，不循环数组上的私有属性；
- for...of循环可以被break打断；

var ary=[1,2,3,4,5,6]
ary.aa='haha';
for(var n of ary){
  if(n>=3) break;//打断
  console.log(n)
}

1.9 面向对象

类的声明

class Fn{
  name;
  getName(){
    alert(123)
  }
}

上面的name和getName都是公有的，可以在类的内部和外部被访问
private 私有的，只能在类内部被访问到，在外部无法访问到；
protected 受保护的，只能在类的内部和类的子类中被访问到；外部不能访问

类的构造函数 constructor

类的构造函数

class Person{
   //name:string参数必须传，其中public这个访问控制符，说明他是外部可以使用的属性；
  constructor(public name:string){
  }
  getName(){
    console.log(this.name)
  }
}
var p1 = new Person('ymy')
p1.getName()

类的继承

extends 继承父级所有的属性和方法
super 调用父类的构造函数；子类的构造函数，必须通过super调用父类的构造函数

2.0 接口

接口interface：声明某个接口；
用来建立某种代码约定，使其他开发者在调用某个方法或创建新的类时，必须遵循接口所定义的代码约定；
把接口作为参数的类型生命

//定义参数的规则
interface Iperson{
  name: string;
  age: number;
}
class Person{
//继承的时候，参数按照以上规则来设置；
  constructor(public config:Iperson) {
    
  }
}
var p1 = new Person({//传参必须按照对象的规则来传参
  name: "ymy",
  age:18
})

用接口来声明方法

//声明一个类的规则
interface Animal{
  eat()
}
//所有声明并实施Aniaml规则的类，必须实现eat方法；
class Tiger implements Animal{
  eat() {
    console.log('i eat grass')
  }
}
class Rabbit implements Animal{
  eat() {
    console.log('i eat meat')
  }
}

2.1 面向对象

模块
模块可以帮助开发者将代码分割为可重用的单元，将模块中的哪些资源暴露出去；
通过import导入； export导出；
注解：用来告诉框架，怎么来处理你程序的元素；可以注解在属性或方法上；
类型定义文件:jquery中index.d.ts
工具文件typings： npm install typings -g