typescript入门，typescript特性

	typescript的介绍这里就不提，之前文章中有，目前typescript还不能直接运行在浏览器中，所以需要使用compiler进行编译成JavaScript文件进行运行。
/*特性一：字符串新特性*/
/*1、多行字符串*/
var content = `aaa
bbb
ccc`;
*******************************************

 
 

  
  编译出js为：
 
 
 
 

  
  var content = "aaa\nbbb\nccc";
 
 
*******************************************
 
 

  
  

 
 
 
 

  
  /*2、字符串模板*/
var myName = 'xuchg';
var getName = function(){
  return 'xuchg';
};
console.log(`my name is ${myName}`);
console.log(`also ${getName()}`);
 
 
*******************************************
 
 

  
  编译出js为：
 
 
 
 

  
  

   
   var myName = 'xuchg';
  
  
  
  

   
   var getName = function () {
  
  
  
  

   
       return 'xuchg';
  
  
  
  

   
   };
  
  
  
  

   
   console.log("my name is " + myName);
  
  
  
  

   
   console.log("also " + getName());
  
  
  
  

  
  *******************************************
//构建HTML模板
console.log(`
  <div>
    <span>${myName}</span>
    <span>${getName()}</span>
  </div>
`);
  
  

  
  *******************************************
  
  

   
   编译出js为：
  
  
  
  

   
   console.log("\n  <div>\n    <span>" + myName + "</span>\n    <span>" + getName() + "</span>\n  </div>\n");
  
  
  
  

  
  *******************************************
 
 
 
 


  
  /*3、自动拆分字符串*/
function test(temp,name,age){
  console.log(temp);
  console.log(name);
  console.log(age);
}
var myName1 = "xuchg";
var getAge = function(){
  return 23;
}
test`hello my name is ${myName1} I am ${getAge()}`;
 
 
*******************************************
 
 

  
  

   
   编译出js为：
  
  
  
  

   
   

    
    function test(temp, name, age) {
   
   
   
   

    
        console.log(temp);
   
   
   
   

    
        console.log(name);
   
   
   
   

    
        console.log(age);
   
   
   
   

    
    }
   
   
   
   

    
    var myName1 = "xuchg";
   
   
   
   

    
    var getAge = function () {
   
   
   
   

    
        return 23;
   
   
   
   

    
    };
   
   
   
   

    
    (_a = ["hello my name is ", " I am ", ""], _a.raw = ["hello my name is ", " I am ", ""], test(_a, myName1, getAge()));
   
   
   
   

   
   *******************************************
  
  

  
  /*二、参数新特性*/
var myName2:string = "xuchg";
//typescript类型推断
var alias = "hehe";
//报错
// alias = 12;
var alias1:any = "这是一个任意类型";

 
 
 
 

  
  var age:number = 21;
var man:boolean = true;
function testReturn(name:string):string{
  return "这是一个参数和返回值定义类型的方法";
}
//自定义类型
class Person{
  name:string;
  age:number;
}
var xcg:Person = new Person();
xcg.name = "xuchg";
xcg.age = 23;

  
  

   
   

   
   *******************************************
编译出js为：
  
  
  
  


  
  
  
  

   
   

    
    var myName2 = "xuchg";
   
   
   
   

    
    //typescript类型推断
   
   
   
   

    
    var alias = "hehe";
   
   
   
   

    
    //报错
   
   
   
   

    
    // alias = 12;
   
   
   
   

    
    var alias1 = "这是一个任意类型";
   
   
   
   

    
    var age = 21;
   
   
   
   

    
    var man = true;
   
   
   
   

    
    function testReturn(name) {
   
   
   
   

    
        return "这是一个参数和返回值定义类型的方法";
   
   
   
   

    
    }
   
   
   
   

    
    //自定义类型
   
   
   
   

    
    var Person = (function () {
   
   
   
   

    
        function Person() {
   
   
   
   

    
        }
   
   
   
   

    
        return Person;
   
   
   
   

    
    }());
   
   
   
   

    
    var xcg = new Person();
   
   
   
   

    
    xcg.name = "xuchg";
   
   
   
   

    
    xcg.age = 23;
   
   
   
   

   
   *******************************************
  
  
  
  
/*2、参数默认值*/
var myName3:string = "xuchg";
function testVal(a:string,b:string,c:string="这是默认值"){
  console.log(a);
  console.log(b);
  console.log(c);
}//注意：带默认值得参数要声明在最后
testVal("aaa","bbb","CCC");
testVal("aaa","bbb");
  
  

  
  *******************************************
编译出js为：
 
 
 
 

  
  

   
   var myName3 = "xuchg";
  
  
  
  

   
   function testVal(a, b, c) {
  
  
  
  

   
       if (c === void 0) { c = "这是默认值"; }
  
  
  
  

   
       console.log(a);
  
  
  
  

   
       console.log(b);
  
  
  
  

   
       console.log(c);
  
  
  
  

   
   } //注意：带默认值得参数要声明在最后
  
  
 
 
 
 

  
  

  
  *******************************************

 
 
 
 


  
  /*3、可选参数：？*/
function testChange(a:string,b?:string,c:string="这是默认值"){
  console.log(a);
  console.log(b.length);//注意：声明了可选参数需要在函数中进行处理，否则会出现错误，而且可选参数不能声明在必选参数的前面
  console.log(c);
}
testChange("XXX");
 
 
 
 

  
  

  
  *******************************************
编译出js为：
 
 
 
 


 
 
 
 

  
  

   
   function testChange(a, b, c) {
  
  
  
  

   
       if (c === void 0) { c = "这是默认值"; }
  
  
  
  

   
       console.log(a);
  
  
  
  

   
       console.log(b.length); //注意：声明了可选参数需要在函数中进行处理，否则会出现错误，而且可选参数不能声明在必选参数的前面
  
  
  
  

   
       console.log(c);
  
  
  
  

   
   }
  
  
  
  

   
   testChange("XXX");
  
  
  
  

   
   

   
   *******************************************

  
  

  
  /*三、函数新特性*/
/*1、rest and spread操作符，就是用来声明任意数量的方法参数，相当于Java的可变参数*/
function rs1(...args){
  args.forEach(function(arg){
    console.log(arg);
  })
}
rs1(1,2,3);
rs1(4,5,6,7,8,9);

  
  

  
  *******************************************
编译出js为：
 
 
 
 

  
  

   
   function rs1() {
  
  
  
  

   
       var args = [];
  
  
  
  

   
       for (var _i = 0; _i < arguments.length; _i++) {
  
  
  
  

   
           args[_i] = arguments[_i];
  
  
  
  

   
       }
  
  
  
  

   
       args.forEach(function (arg) {
  
  
  
  

   
           console.log(arg);
  
  
  
  

   
       });
  
  
  
  

   
   }
  
  
  
  

   
   rs1(1, 2, 3);
  
  
  
  

   
   rs1(4, 5, 6, 7, 8, 9);
  
  
//另一种情况
function rs2(a,b,c){
  console.log(a);
  console.log(b);
  console.log(c);
}
var args = [1,2];
// rs2(...args);
 
 
 
 

  
  

  
  *******************************************


  
  
/*2、generator函数，控制函数的执行过程，手工暂停和恢复代码的执行，只支持ES6*/
function* doThing(){
  console.log("start");
  yield;
  console.log("finish");
}
var func = doThing();
func.next();
func.next();

  
  

  
  *******************************************
编译出js为：
 
 
 
 

  
  

   
   function doThing() {
  
  
  
  

   
       return __generator(this, function (_a) {
  
  
  
  

   
           switch (_a.label) {
  
  
  
  

   
               case 0:
  
  
  
  

   
                   console.log("start");
  
  
  
  

   
                   return [4 /*yield*/];
  
  
  
  

   
               case 1:
  
  
  
  

   
                   _a.sent();
  
  
  
  

   
                   console.log("finish");
  
  
  
  

   
                   return [2 /*return*/];
  
  
  
  

   
           }
  
  
  
  

   
       });
  
  
  
  

   
   }
  
  
  
  

   
   var func = doThing();
  
  
  
  

   
   func.next();
  
  
  
  

   
   func.next();
  
  
  
  

  
  *******************************************


  
  /*3、destructuring析构表达式，是通过表达式将对象或数组进行拆解成任意数量的变量*/
function getStock(){
  //返回一个对象
  return {
    nameVal:'xuchg',
    ageVal:23
  }
}
//以下为js中的写法，以作对比
var stock = getStock();
var name1 = stock.nameVal;
var age1 = stock.ageVal;


//typescript的写法
var {nameVal,ageVal} = getStock();
console.log(nameVal);
console.log(ageVal);
//析构表达式接受的变量名必须和返回对象的变量名相同


//析构表达式从数组中取值
var arr = [1,2,4];
var [num1,num2,...otherNum] = arr;
console.log(num1);
console.log(num2);
console.log(otherNum);


//用在方法上
function doSomeThing([num1,num2,...otherNum]){
  console.log(num1);
  console.log(otherNum);
}
doSomeThing(arr);//拆分参数变量

  
  

  
  *******************************************
编译出js为：
 
 
 
 

  
  

  
  

   
   function getStock() {
  
  
  
  

   
       //返回一个对象
  
  
  
  

   
       return {
  
  
  
  

   
           nameVal: 'xuchg',
  
  
  
  

   
           ageVal: 23
  
  
  
  

   
       };
  
  
  
  

   
   }
  
  
  
  

   
   //以下为js中的写法，以作对比
  
  
  
  

   
   var stock = getStock();
  
  
  
  

   
   var name1 = stock.nameVal;
  
  
  
  

   
   var age1 = stock.ageVal;
  
  
  
  

   
   //typescript的写法
  
  
  
  

   
   var _b = getStock(), nameVal = _b.nameVal, ageVal = _b.ageVal;
  
  
  
  

   
   console.log(nameVal);
  
  
  
  

   
   console.log(ageVal);
  
  
  
  

   
   //析构表达式接受的变量名必须和返回对象的变量名相同
  
  
  
  

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

   
   var arr = [1, 2, 4];
  
  
  
  

   
   var num1 = arr[0], num2 = arr[1], otherNum = arr.slice(2);
  
  
  
  

   
   console.log(num1);
  
  
  
  

   
   console.log(num2);
  
  
  
  

   
   console.log(otherNum);
  
  
  
  

   
   //用在方法上
  
  
  
  

   
   function doSomeThing(_a) {
  
  
  
  

   
       var num1 = _a[0], num2 = _a[1], otherNum = _a.slice(2);
  
  
  
  

   
       console.log(num1);
  
  
  
  

   
       console.log(otherNum);
  
  
  
  

   
   }
  
  
  
  

   
   doSomeThing(arr); //拆分参数变量
  
  
  
  

   
   var _a;
  
  
  
  

  
  *******************************************