ts学习-3

柔情只为你懂 2022-11-22 10:14 170阅读 0赞

/* 
    typescript中的数据类型
    typescript中为了代码的书写规范 有利于维护增加了类型校验
    布尔类型（boolean)
    数字类型（number)
    字符串类型（string)
    数组类型（array)
    元组类型（tuple
    枚举类型（enum)
    任意类型（any)
    null和undefined
    void 类型
    never 类型
    */
    /* 
    布尔类型
    */
    var flag:boolean=true;
    flag=false;
    /* 
    数字类型 number
    */
    var a:number=124;
    a=2;
    // a='sdsd';//错误写法
    // a=false;//错误写法
    /* 
    字符串类型 string
    */
    var str:string='yangdongxu';
    str='nihao woaini';
    /* 
    数组类型 array  ts中有你两种方式定义数组
    */
    // es5 let arr=[1,3,'sad'];
    //第一种定义的方式
    let arr:number[]=[1,2,3,4];//只能是数字元素不能是其他的元素 负责会报错
    let arr1:string[]=['cao','cao','j','hao'];//只能是数字元素不能是其他的元素 负责会报错
    //第二种方式定义数组
    let getArr:Array<number>=[12,32];
    //第三种方式
    let anyArr:any[]=['c',12];
    
    //元组类型（tuple)  属于数组的一种 eg:数组中的具体元素类型 必须一一对应
    let tupleArr:[string,number,boolean]=['a',11,false];
    
    //枚举类型数据
    enum Flag{success=1,error=-1};
    let f:Flag=Flag.success;
    console.log(f);//1
    /* enum Color {red,blue,green};
    let c:Color=Color.blue;
    console.log(c);//1 默认无值时候从0开始算  red0 blue1  green2  */
    enum Color {red,blue=5,green};
    let c:Color=Color.green;
    console.log(c);//6  从上一个值中加1 5+1=6 默认无值时候从0开始算  red0 blue5  green6
    //null类型
    let nullV:null;
    nullV=null;
    //undefined类型
    let undefinedV:undefined;
    
    //定义一个多种类型的数据
    let moreV:undefined|number;
    moreV=undefined;
    moreV=1212;
    undefinedV=undefined;
    //void 表示空的 表示方法没有返回任何类型
    function sun():void{
        console.log('void');
    }
    sun();
    
    //指定函数的类型
    function getNum():number{
        return 1
    }
    getNum();
    
    //never类型：是其他类型（包括null和undefined）的子类型，代表从不会出现的值
    //这意味着声明never类型的变量不能被never类型的所赋值
    /* 
    let a:undefined;
    a=undefined;
    let b:null;
    b=null;
    */
    let neverV:never;
    // neverV=(()=>{
    //     throw new Error('错误');
    // })()
    //定义函数
    function caoFn():string{
        return 'caoFn'
    }
    function caoFn1():number{
        return 123
    }
    var Caoni=function():number{
       return 1223
    }
    Caoni();//
    //ts定义方法参数
    function getInfo(name:string,age:number):string{
       return `${name}--${age}`;
    }
    
    console.log(getInfo('yang',12));
    //没有方法的返回值
    function voidFnDemo():void{
      console.log('111')
    }
    voidFnDemo();
    //方法可选参数
    //es5方法形参和实参可以不一样 但是ts必须一样 如果不一样就需要配置
    function getInfoChoose(name:string,age?:number):string{
        if(age){
            return `${name}--${age}`;
        }else{
            return `${name}--年龄保密`
    
        }
     }
     console.log(getInfoChoose("cao"));
     console.log(getInfoChoose("cao",21));
     //注意可选参数必须放在最后面
     
      function getInfoChoose1(name:string,age?:number):string{
        if(age){
            return `${name}--${age}`;
        }else{
            return `${name}--年龄保密`
    
        }
     }
     console.log(getInfoChoose1("cao111",200));//
    
     /* function getInfoChoose1(name?:string,age:number):string{
        if(age){
            return `${name}--${age}`;
        }else{
            return `${name}--年龄保密`
    
        }
     }
     console.log(getInfoChoose1("cao111"));//可以执行但是会报错*/
    
     //es5中没有默认参数 es6中和ts中都可以设置默认的参数
     function getInfoChooseGO(name:string,age:number=20):string{
        if(age){
            return `${name}--${age}`;
        }else{
            return `${name}--年龄保密`
    
        }
     }
     console.log(getInfoChooseGO("默认参数的名字"));
     console.log(getInfoChooseGO("默认参数的名字",30));
     //三点运算符 接受新的参数传过来的值
    /*  function sumParams(...rest:number[]):number{
         let sum=0;
        for(let i=0;i<rest.length;i++){
            sum+=rest[i]
        }
        return sum
     }
     console.log(sumParams(1,2,3,4)); */
     function sumParams(a:number,b:number,...rest:number[]):number{
        let sum=a+b;
       for(let i=0;i<rest.length;i++){
           sum+=rest[i]
       }
       return sum
    }
    console.log(sumParams(1,2,3,4,5));
    
    //ts中的重载 通过为同一个函数提供多个函数类型定义来试下多种功能的目的
    
    function repeatFn(name:string):string;
    function repeatFn(name:string,age:number):string;
    function repeatFn(name:any,age?:any):any{
      if(age){
          return `我叫：${name}我得年纪：${age}`
      }else{
          return `我叫${name}`
      }
    };
    console.log(repeatFn('zhangsan',10));