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 抽象類 繼承 多態

    
*/


//1、ts中類的定義

    /*
    es5:

        function Person(name){

            this.name=name;

            this.run=function(){

                console.log(this.name)
            }
        }

        var p=new Person('張三');

        p.run()
    */


  /*
        ts中定義類：


            class Person{

                name:string;   //屬性  前面省略了public關鍵詞

                constructor(n:string){  //構造函數   實例化類的時候觸發的方法
                    this.name=n;
                }

                run():void{

                    alert(this.name);
                }

            }
            var p=new Person('張三');

            p.run()
  
  */



    /*
    class Person{

        name:string; 

        constructor(name:string){  //構造函數   實例化類的時候觸發的方法
            this.name=name;
        }

        getName():string{

            return this.name;
        }
        setName(name:string):void{

            this.name=name;
        }
    }
    var p=new Person('張三');

    alert(p.getName());


    p.setName('李四');


    alert(p.getName());

*/





//2、ts中實現繼承  extends、 super


    // class Person{

    //     name:string;

    //     constructor(name:string){
    //         this.name=name;
    //     }

    //     run():string{

    //         return `${this.name}在運動`
    //     }
    // }
    // // var p=new Person('王五');
    // // alert(p.run())


    // class Web extends Person{
    //     constructor(name:string){

    //         super(name);  /*初始化父類的構造函數*/
    //     }
    // }


    // var w=new Web('李四');
    // alert(w.run());






    //ts中繼承的探討  父類的方法和子類的方法一致

        // class Person{

        //     name:string;

        //     constructor(name:string){
        //         this.name=name;
        //     }

        //     run():string{

        //         return `${this.name}在運動`
        //     }
        // }
        // // var p=new Person('王五');
        // // alert(p.run())


        // class Web extends Person{
        //     constructor(name:string){

        //         super(name);  /*初始化父類的構造函數*/
        //     }
        //     run():string{

        //         return `${this.name}在運動-子類`
        //     }
        //     work(){

        //         alert(`${this.name}在工作`)
        //     }
        // }


        // var w=new Web('李四');
        // // alert(w.run());

        // // w.work();

        // alert(w.run());









// 3 類里面的修飾符  typescript里面定義屬性的時候給我們提供了 三種修飾符

/*
    public :公有          在當前類里面、 子類  、類外面都可以訪問
    protected：保護類型    在當前類里面、子類里面可以訪問 ，在類外部沒法訪問
    private ：私有         在當前類里面可以訪問，子類、類外部都沒法訪問

    屬性如果不加修飾符 默認就是 公有 （public）

*/



//public :公有          在類里面、 子類  、類外面都可以訪問


            //   class Person{

            //         public name:string;  /*公有屬性*/

            //         constructor(name:string){
            //             this.name=name;
            //         }

            //         run():string{

            //             return `${this.name}在運動`
            //         }
            //     }
            //     // var p=new Person('王五');
            //     // alert(p.run())


            //     class Web extends Person{
            //         constructor(name:string){

            //             super(name);  /*初始化父類的構造函數*/
            //         }
            //         run():string{

            //             return `${this.name}在運動-子類`
            //         }
            //         work(){

            //             alert(`${this.name}在工作`)
            //         }
            //     }

            //     var w=new Web('李四');

            //     w.work();


        //類外部訪問公有屬性


                //   class Person{

                //     public name:string;  /*公有屬性*/

                //     constructor(name:string){
                //         this.name=name;
                //     }

                //     run():string{

                //         return `${this.name}在運動`
                //     }
                // }

                // var  p=new Person('哈哈哈');

                // alert(p.name);





//protected：保護類型    在類里面、子類里面可以訪問 ，在類外部沒法訪問


            //   class Person{

            //         protected name:string;  /*公有屬性*/

            //         constructor(name:string){
            //             this.name=name;
            //         }

            //         run():string{

            //             return `${this.name}在運動`
            //         }
            //     }
                // var p=new Person('王五');
                // alert(p.run())


                // class Web extends Person{
                //     constructor(name:string){

                //         super(name);  /*初始化父類的構造函數*/
                //     }                  
                //     work(){

                //         alert(`${this.name}在工作`)
                //     }
                // }

                // var w=new Web('李四11');

                // w.work();

                // alert( w.run());


                
        //類外外部沒法訪問保護類型的屬性


                // class Person{

                //     protected name:string;  /*保護類型*/

                //     constructor(name:string){
                //         this.name=name;
                //     }

                //     run():string{

                //         return `${this.name}在運動`
                //     }
                // }

                // var  p=new Person('哈哈哈');

                // alert(p.name);





// private ：私有        在類里面可以訪問，子類、類外部都沒法訪問
            

                // class Person{

                //     private name:string;  /*私有*/

                //     constructor(name:string){
                //         this.name=name;
                //     }

                //     run():string{

                //         return `${this.name}在運動`
                //     }
                // }


                // class Web extends Person{

                //     constructor(name:string){
                //         super(name)
                //     }

                //     work(){

                //         console.log(`${this.name}在工作`)
                //     }
                // }



    class Person{

        private name:string;  /*私有*/

        constructor(name:string){
            this.name=name;
        }

        run():string{

            return `${this.name}在運動`
        }
    }

    var p=new Person('哈哈哈');

    alert(p.run());