typescript

ts暫時不被支持,所以需要編譯使用;ts補充了js沒有的語法特性,例如類型,接口,抽象等;由于ts設(shè)計嚴(yán)謹(jǐn),所以更適合大型項目的開發(fā)

    //ts是編譯檢測,俗稱硬綁定,編譯期,編譯期,編譯期!三遍
    //安裝ts
    npm i -g typescript
    //創(chuàng)建ts文件 1.ts    
    //編譯 編譯結(jié)束后會生成對應(yīng)的js文件
    tsc 1.ts
//常用語法
    //變量類型:number :string :boolean :any 還有兩個奇怪的:null :undefined 沒啥軟用的屬性
        //指明變量類型的方法
        let a:number = 1;//限制a為number類型
        
        let b='str';//限制b為string類型
        //不指明變量初始類型
        let c;//不指明初始化,就可以任意賦值
        c=12;//賦值成number
        c='str';//賦值成string
        
        let d:any='d';//指明類型是any,任意類型
    //函數(shù)參數(shù)指定類型 除了常規(guī)的四個類型之外,還有:void聲明無返回值 :never聲明這個函數(shù)永遠(yuǎn)不會結(jié)束,表現(xiàn)為該函數(shù)報錯,或者手動throw出一個Error
        //指定參數(shù)a是number，b是number,默認(rèn)值是6，返回值是number;如果不一致,tsc編譯時會出錯
        function fun(a:number,b:number=6):number{
            return a+b;
        }
    //操作數(shù)組類型 :number[] :string[] :boolean[] :any[]
        let arr:number[] = [1,2,3,4];
        let arr:Array<number>=[1,2,3,4];//第二種寫法
    //聯(lián)合聲明,即可以聲明多種類型
        //變量
        let a:(number|string)=2;//這里a可以被賦值為number或者string
        //數(shù)組
        let arr:(number|string)[]=[1,2,'str'];
    //元組類型
        let arr:[number|string]=[1,'str'];//強制數(shù)組前兩位是number,string,后面向數(shù)組內(nèi)push內(nèi)容的類型不限制
    //枚舉
        enum gender{a='男',b='女'};
        let g:gender = gender.b;
        let s ='男';
        switch(s){
            case g:
                console.log('女');
            break;
            case gender.a:
                console.log('男');
            break;
        }

//類操作,ts中 重新定義了類的寫法;
        class Person{
            //訪問修飾符 protected 自己跟子類可以訪問
            //訪問修飾符 private 自己可以訪問
            //訪問修飾符 public 外界也可以訪問
            protected name:string;//聲明可以被自己跟子類訪問的屬性
            private age:number;//聲明了私有屬性name是string類型
            constructor(name:string, age:number){
                this.name=name;
                this.age=age;
            }
            public show():void{
                console.log(`名字：${this.name}，年齡：${this.age}`);
            }
        }
        //繼staff類承Person
        class Staff extends Person{
            private job:string;
            constructor(name:string, age:number, job:string){
                super(name, age);
                this.job=job;
            }
            //方法的權(quán)限
            public show():void{
                super.show();
                console.log(`崗位：${this.job}`);
            }
        }
        let s:Staff=new Staff('blue', 18, '打雜的');
        s.show();
        //第二種寫法
        class Person{
            //將屬性聲明,參數(shù),參數(shù)賦值給自身屬性,合成一起做,只需要在參數(shù)加上修飾符即可
            constructor(protected name:string,private age:number){
            }
            public show():void{
                console.log(`名字：${this.name}，年齡：${this.age}`);
            }
        }
        let s:Person=new Person('blue', 18);
        s.show();
    //declare 外部聲明,用來聲明一個編譯期沒有,運行時可能有的屬性,以便編譯通過
    //修飾符 static 靜態(tài)成員,加上static后,無需實例化即可調(diào)用的屬性
    //修飾符 const 只讀成員,加上之后變成了不可修改的只讀,
    //const 與 static 不能同時使用
        class Person{
            public static user:string='blue';
            constructor(name:string, private age:number){
                //this.name=name;     //?
            }
        }
        let p:Person=new Person('blue', 18);
        console.log(Person.user);
    //訪問器,編譯時需要使用ts -t es5 1.ts 來指定編譯的es版本,get set,不支持低版本js 
        class Person{
            private _name:string;

            constructor(name:string){
                this._name=name;
            }
            //get訪問器,name() 可以隨便寫,調(diào)用的時候調(diào)用對應(yīng)的名字就好
            get name():string{
                return this._name;
            }
            //set訪問器
            set name(newName: string){
                if(newName.length<8){
                throw new Error('名字最少8位');
                }else{
                this._name=newName;
                }
            }
        }
        let p:Person=new Person('blue');
        p.name='zhangsanhaochang';
        console.log(p.name);

//高級特征:抽象、接口(這二者相比更推薦使用接口,更靈活更方便更簡單)
    //跟JAVA一個鳥樣,老子特么為啥轉(zhuǎn)前端,不就是不想寫這些破東西么,現(xiàn)在好了,又特么回去了,還能怎么辦?當(dāng)然是選擇原諒他.
    //抽象 --> 定義抽象類
    //抽象類必須實現(xiàn)所有抽象方法
    abstract class Shape{
        abstract draw(gd):void{

        }
        abstract area():number{
            return 123;
        }
        abstract pointin(x:number,y:number):boolean{
            return true;
        }
    }

    class Rect extends Shape{
        constructor(private w:number,private h:number){
            super();
        }
        draw(gd):void{
            gd.fillRect(0,0,this.w,this.h);
        }
        area():number{
            return this.w*this.h;
        }
        pointin():boolean{
            return true;
        }
    }
    //可以定義類型
    let a:Shape;
    //a即可被賦值為Shape的任意實現(xiàn)類,
    a=new Rect(400,500);
    a.area();

    //接口 --> 定義接口
    //接口可以不實現(xiàn)所有函數(shù)
    interface Shape{
        area():number
    }
    class Rect implements Shape{
        //接口不需要寫super()
        constructor(private w:number,private h:number){}
        //實現(xiàn)接口方法
        area():number{
            return this.w*this.h; 
        }
    }
    let r:Shape = new Rect(100,200)