typescript简单入门

typescript优势
1.es6
2.ide支持 1）类型检查（string number） 2)语法提示（根据上下文提示）3）重构（修改变量  文件名）
3.angular2的开发语言

搭建typescript开发环境
compiler typescript-》javascript

在线compiler http://www.typescriptlang.org/play/index.html
本地compiler开发  npm install -g typescript   tsc --version

新建类  hello.ts
export class Hello{}
tsc hello.ts  生成hello.js

字符串特性
多行字符串
var content = `aaa
bbb
ccc
`
-->js  var content = "aaa\nbbb\nccc\n";
字符串模板（变量或函数）
var myname = "xxq";
var getname = function () {
    return "xxq1"
};

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

-->js
var myname = "xxq";
var getname = function () {
    return "xxq1";
};
console.log("hello " + myname);
console.log("hello " + getname());
---------------

var myname = "xxq";
var getname = function () {
    return "xxq1"
};

console.log(`<div>
<span>${myname}</span>
<span>${getname()}</span>
<span>xxx</span>
</div>`)
-->js
var myname = "xxq";
var getname = function () {
    return "xxq1";
};
console.log("<div>\n<span>" + myname + "</span>\n<span>" + getname() + "</span>\n<span>xxx</span>\n</div>");

自动拆分字符串 （字符串模板调用函数，并把值传给函数中的参数）
function test(template, name, age) {
    console.log(template);
    console.log(name);
    console.log(age);
}
var myname = "xxq";
function getAge() {
    return 23;
}
test`hello ${myname},age is ${getAge()}`

运行结果
[ "hello ", ",age is ", "" ]  
xxq  
23

typescript参数类型
使用冒号指定类型
var female: boolean = true;
var age: number = 12;
var myname: string = "xxq";
typescript类型推断机制 （当第一次给变量赋值的时候，默认会给变量一个类型，当第二次赋值改变变量类型的时候，typescript会报错，但是转换的js不会报错）
var myage = 12;
myage=""；
如果想改变变量类型又不报错，设置类型为any
var myage:any = 12;
 myage=""
void 返回值
function hi(name:string):void{
    return
}
 hi("")

自定义类型
class Person {
    name: string;
    age:number
}
var zhangsan: Person = new Person();
zhangsan.age = 12;
zhangsan.name="zhangsan";

参数默认值（函数中带参数的默认值声明在最后）
可选参数（在必选参数的后面）
var myname:string="xxq"
function test(a: string, b?: string,c: string="jojo") {
    console.log(a);
    console.log(b);
    console.log(c);
}
test('xxx', 'yyy', 'zzz');// xxx  yyy  zzz
test('xxx', 'yyy');// xxx  yyy  jojo
test('xxx')  //  xxx  undefined  jojo
值得注意的是 如果可选参数未定义 需要在函数里做判断 b.length会报错

rest  and spread操作符 -用来声明任意数量的方法参数
//方法1
function test(...args) {
    args.forEach(function (arg) {
        console.log(arg)
    })
}
test(1, 2, 3, 4, 5);
test(1, 2);
//方法2
function test(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
var arg = [1, 2];
test(...arg);
var arg2 = [1, 2, 2, 3];
test(...arg2);

generator函数-控制函数的执行过程，手工暂停和恢复代码执行
function* test(){
  console.log("start");
  yield;
  console.log("end");
}

var f1=test()
f1.next();

//方法2
 function* price(stock){
    while(true){
        yield Math.random()*100;
    }
}
var p=price("IBM");
var limit=15;
var pri=100;

while(pri>limit){
  pri=p.next().value;
  console.log(`geration is ${pri}`)
}

析构表达式 对象/数组-》任意数量的变量
//对象
function xigou() {
    return {
        name: "IBM",
        price: {
            price1: 200,
            price2:300
        }
    }
}

var { name:namex, price:{price1,price2} } = xigou()
console.log(namex);
console.log(price1);
console.log(price2);
//数组
var arr = [1, 2, 3, 4];
var [number1, ,,number2] = arr;
console.log(number1);
console.log(number2);

//
var arr = [1, 2, 3, 4];
var [number1,number2,...others] = arr;
console.log(number1);
console.log(number2);
console.log(others)
//
var arr = [1, 2, 3, 4];
function test([number1,number2,...others]) {
    console.log(number1);
    console.log(number2);
    console.log(others)
}
 test(arr)

箭头表达式
//构造函数
function Test(name:string) {
    this.name = name;
    setInterval( function(){
        console.log("name is "+this.name)
    },1000)
    setInterval( ()=>{
        console.log("name is "+this.name)
    },1000)
    
}
//新建一个对象中的this指针不指向window
var stu=new Test("xxq")

枚举
enum Role {Employee=3,Manager,Admin}
var role: Role = Role.Admin;
//Employee 3,Manager 4,Admin 5
console.log('role',role)
 
//类
class Report {
    reports: string[];
    constructor(reports: string[]) {
        this.reports=reports
     }

    run() {
        this.reports.forEach(function (data) {
            console.log(data)
      })
     }
}

let eg = new Report(['first', 'second']);
eg.run();
// 继承

class newTable extends Report {
    header: string[];
    constructor(header: string[], origin: string[]) {
        super(origin)
        this.header = header;
    }
    run() {
        console.log(this.header);
        super.run()
    }
}

var headers: string[] = ['Name'];
var data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
var n: newTable = new newTable(headers, data);
n.run()

//胖箭头函数
var data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
data.forEach(item => console.log(item));
var evens = [2, 4, 6, 8];
// var odds = evens.map(item => item + 1);
var lowcase = ['a','b','c','d'];
var odds = lowcase.map(line => {
    // console.log(line.toUpperCase());
    return line.toUpperCase()
});
console.log(odds)

// var nate = {
//     name: "Nate",
//     guitars: ["Gibson", "Martin", "Taylor"],
//     printGuitars: function () {
//         var _this = this;
//         // console.log("outer-this",this)
//         this.guitars.forEach(function (item) {
//             // console.log("inner-this",this)
//             // console.log(item+" "+this.name)
//             console.log(item + " " + _this.name)
//         })
//      }
// }
var nate = {
    name: "Nate",
    guitars: ["Gibson", "Martin", "Taylor"],
    printGuitars: function () {
        this.guitars.forEach((item) => {
             console.log(item + " " + this.name)
        })
    }
    
}
nate.printGuitars()