typescript入门，typescript特性

秒速五厘米 2022-06-11 00:41 295阅读 0赞

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; 
      
       
    
      
       *******************************************