typescript接口的概念 以及屬性類型接口

/*
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
4、typeScript中的類

    4.1 類的定義
    4.2 繼承
    4.3 類里面的修飾符
    4.4 靜態屬性 靜態方法
    4.5 抽象類 多態
5、typeScript中的接口

    5.1 屬性類接口
    5.2 函數類型接口
    5.3 可索引接口
    5.4 類類型接口
    5.5 接口擴展

   
*/


/*
接口的作用：在面向對象的編程中，接口是一種規范的定義，它定義了行為和動作的規范，在程序設計里面，接口起到一種限制和規范的作用。接口定義了某一批類所需要遵守的規范，接口不關心這些類的內部狀態數據，也不關心這些類里方法的實現細節，它只規定這批類里必須提供某些方法，提供這些方法的類就可以滿足實際需要。 typescrip中的接口類似於java，同時還增加了更靈活的接口類型，包括屬性、函數、可索引和類等。

定義標准。

*/


// 1、屬性接口     對json的約束



    //ts中定義方法
    /*
        function printLabel():void {
            console.log('printLabel');
        }
        printLabel();
    */


    /*
    ts中定義方法傳入參數

        function printLabel(label:string):void {
            console.log('printLabel');
        }

        printLabel('hahah');

    */



        /*
            ts中自定義方法傳入參數,對json進行約束

        */

        /*
        
        function printLabel(labelInfo:{label:string}):void {
            console.log('printLabel');
        }

        printLabel('hahah'); //錯誤寫法


        printLabel({name:'張三'});  //錯誤的寫法


        printLabel({label:'張三'});  //正確的寫法
    */



//對批量方法傳入參數進行約束。


//接口：行為和動作的規范，對批量方法進行約束



        //就是傳入對象的約束    屬性接口
        //  interface FullName{

        //     firstName:string;   //注意;結束
        //     secondName:string;

        // }

        // function printName(name:FullName){

        //     // 必須傳入對象  firstName  secondName
        //     console.log(name.firstName+'--'+name.secondName);
        // }
        // // printName('1213');  //錯誤

        // var obj={   /*傳入的參數必須包含 firstName  secondName*/
        //     age:20,
        //     firstName:'張',
        //     secondName:'三'
        // };
        // printName(obj)







//  接口：行為和動作的規范，對批量方法進行約束

       

            // interface FullName{
            //     firstName:string;   //注意;結束
            //     secondName:string;
            // }

            // function printName(name:FullName){
            //     // 必須傳入對象  firstName  secondName
            //     console.log(name.firstName+'--'+name.secondName);
            // }



            // function printInfo(info:FullName){

            //     // 必須傳入對象  firstName  secondName
            //     console.log(info.firstName+info.secondName);
            // }

            // var obj={   /*傳入的參數必須包含 firstName  secondName*/
            //     age:20,
            //     firstName:'張',
            //     secondName:'三'
            // };
            // printName(obj);


            // printInfo({
            //     firstName:'李',
            //     secondName:'四'
            // })





//接口 ：可選屬性




    // interface FullName{

    //     firstName:string;
    //     secondName:string;
    // }

    // function getName(name:FullName){

    //     console.log(name)
    // }
    // //參數的順序可以不一樣
    // getName({        
    //     secondName:'secondName',
    //     firstName:'firstName'
    // })





    

    // interface FullName{
    //     firstName:string;
    //     secondName?:string;
    // }

    // function getName(name:FullName){

    //     console.log(name)
    // }  
    // getName({               
    //     firstName:'firstName'
    // })







/*
       $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json"             
         });
         
*/


interface Config{
    type:string;
    url:string;
    data?:string;
    dataType:string;
}

//原生js封裝的ajax 
function ajax(config:Config){

   var xhr=new XMLHttpRequest();

   xhr.open(config.type,config.url,true);

   xhr.send(config.data);

   xhr.onreadystatechange=function(){

        if(xhr.readyState==4 && xhr.status==200){
            console.log('chengong');


            if(config.dataType=='json'){

                console.log(JSON.parse(xhr.responseText));
            }else{
                console.log(xhr.responseText)

            }


        }
   }
}


ajax({
    type:'get',
    data:'name=zhangsan',
    url:'http://a.itying.com/api/productlist', //api
    dataType:'json'
})