ts中的函數


/*
1、vscode配置自動編譯

    1.第一步   tsc --inti 生成tsconfig.json   改 "outDir": "./js",  


    2、第二步 任務 - 運行任務  監視tsconfig.json


2、typeScript中的數據類型

    typescript中為了使編寫的代碼更規范,更有利於維護,增加了類型校驗,在typescript中主要給我們提供了以下數據類型


        布爾類型(boolean)
        數字類型(number)
        字符串類型(string)
        數組類型(array)
        元組類型(tuple)
        枚舉類型(enum)
        
        任意類型(any)
        null 和 undefined
        void類型
        never類型

3、typeScript中的函數

    3.1、函數的定義
    3.2、可選參數
    3.3、默認參數
    3.4、剩余參數
    3.5、函數重載
    3.6、箭頭函數  es6


*/


// 3.1、函數的定義


//es5定義函數的方法
   /*
    //函數聲明法
        function run(){

            return 'run';
        }
    //匿名函數
        var run2=function(){

            return 'run2';
        }
   */



//ts中定義函數的方法


 //函數聲明法
        // function run():string{

        //     return 'run';
        // }


        //錯誤寫法
        // function run():string{

        //     return 123;
        // }






//匿名函數


    // var fun2=function():number{

    //     return 123;
    // }


    // alert(fun2()); /*調用方法*/





//ts中定義方法傳參



    /*
        function getInfo(name:string,age:number):string{

                return `${name} --- ${age}`;
        }


        alert(getInfo('zhangsan',20));

    */


    // var getInfo=function(name:string,age:number):string{

    //     return `${name} --- ${age}`;
    // }
       
    // alert(getInfo('zhangsan',40));




//沒有返回值的方法

        // function run():void{

        //     console.log('run')
        // }
        // run();




// 3.2、方法可選參數 

        // es5里面方法的實參和行參可以不一樣,但是ts中必須一樣,如果不一樣就需要配置可選參數 



       /*
        function getInfo(name:string,age?:number):string{

                if(age){

                    return `${name} --- ${age}`;
                }else{

                    return `${name} ---年齡保密`;
                }


        }

        alert(getInfo('zhangsan'))

        alert(getInfo('zhangsan',123))
       */



    //注意:可選參數必須配置到參數的最后面

    //錯誤寫法
      /*
       function getInfo(name?:string,age:number):string{

                if(age){

                    return `${name} --- ${age}`;
                }else{

                    return `${name} ---年齡保密`;
                }
               

        }

        alert(getInfo('zhangsan'))
      */


// 3.3、默認參數 可選參數


        // es5里面沒法設置默認參數,es6和ts中都可以設置默認參數

        /*

                function getInfo(name:string,age:number=20):string{

                            if(age){

                                return `${name} --- ${age}`;
                            }else{

                                return `${name} ---年齡保密`;
                            }
                        

                }

                // alert( getInfo('張三'));
                alert( getInfo('張三',30));
        */




// 3.4、剩余參數



            // function sum(a:number,b:number,c:number,d:number):number{

            //     return a+b+c+d;

            // }


            // alert(sum(1,2,3,4)) ;


    //三點運算符 接受新參傳過來的值


        /*
            function sum(...result:number[]):number{

                
                var sum=0;

                for(var i=0;i<result.length;i++){

                    sum+=result[i];  
                }

                return sum;

            }

            alert(sum(1,2,3,4,5,6)) ;
        */




    /*

        function sum(a:number,b:number,...result:number[]):number{

                    
                var sum=a+b;

                for(var i=0;i<result.length;i++){

                    sum+=result[i];  
                }

                return sum;

            }

            alert(sum(1,2,3,4,5,6)) ;
    */
                    


// 3.5、ts函數重載

    // java中方法的重載:重載指的是兩個或者兩個以上同名函數,但它們的參數不一樣,這時會出現函數重載的情況。

    // typescript中的重載:通過為同一個函數提供多個函數類型定義來試下多種功能的目的。

    //ts為了兼容es5 以及 es6 重載的寫法和java中有區別。



    //es5中出現同名方法,下面的會替換上面的方法 
        /*
            function css(config){

            }

            function css(config,value){


            }
        */



    //ts中的重載

                // function getInfo(name:string):string;

                // function getInfo(age:number):string;

                // function getInfo(str:any):any{

                //     if(typeof str==='string'){

                //         return '我叫:'+str;
                //     }else{

                //         return '我的年齡是'+str;
                //     }

                // }

                // alert(getInfo('張三'));   //正確


                // alert(getInfo(20));   //正確


                // alert(getInfo(true));    //錯誤寫法

    

                function getInfo(name:string):string;
                function getInfo(name:string,age:number):string;
                function getInfo(name:any,age?:any):any{
                    if(age){

                        return '我叫:'+name+'我的年齡是'+age;
                    }else{

                        return '我叫:'+name;
                    }
                }

                // alert(getInfo('zhangsan'));  /*正確*/

                // alert(getInfo(123));  錯誤

                // alert(getInfo('zhangsan',20));




// 3.6、箭頭函數  es6  


//this指向的問題    箭頭函數里面的this指向上下文


            

        // setTimeout(function(){

        //     alert('run')
        // },1000)



        setTimeout(()=>{

            alert('run')
        },1000)
    



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM