TypeScript 類绒北、接口黎侈、屬性封裝基礎(chǔ)

\color{red}{}

1、TypeScript 類

一闷游、類的基本構(gòu)成

類里面有有兩個部分 1峻汉、屬性 ? 2、方法

//class 定義一個 City 類
class City{
    1脐往、聲明實例屬性
    name: string;
    clevel: number;
    在屬性前使用 static 關(guān)鍵字定義類屬性(靜態(tài)屬性)
    static country = "中國";

    在屬性前面加上readonly休吠,屬性會變成只讀屬性,只能讀取不能修改业簿。
    readonly provice = "湖南";

    //constructor 構(gòu)造函數(shù)
    //構(gòu)造函數(shù)會在對象創(chuàng)建時調(diào)用
    constructor(name: string, clevel: number){
        this.name = name;
        this.clevel = clevel;
    }
    //一般方法
    about(){
        //about方法放在了哪里? -類的原型對象 上瘤礁,供實例使用
        //about中的this就是Person實例
        consloe.log(this)
        console.log(`歡迎來到${this.name},長沙是${this.clevel}級城市`);
    }
    static hello(){
        console.log("你好,長沙梅尤。")
    }

}
創(chuàng)建對象的實例
const c1 = new City("長沙", 1);
console.log(c1.name);
console.log(c1.provice);
c1.about();

//class中的方法默認開啟了局部的嚴格模式柜思,所以about中的this為undefined
const quanju = c1.about;
quanju();

console.log(City.country);
City.hello();

1.1、定義屬性

直接定義的屬性是實例屬性克饶,需要通過對象的實例去訪問

const c1 = new City("長沙", 1);
c1.name;

在屬性前使用 static 關(guān)鍵字定義類屬性(靜態(tài)屬性),直接通過類訪問酝蜒。

City.country;

1.1、定義方法

直接定義的方法是實例方法矾湃,需要通過對象的實例去訪問

const c1 = new City("長沙", 1);
c1.about();

在屬性前使用 static 關(guān)鍵字定義類方法(靜態(tài)方法),直接通過類訪問亡脑。

City.hello();

二、類的繼承簡介(extends)和 super關(guān)鍵字

(function(){
    // 定義一個動物的類
    class Animal{
        name: string;
        age: number;

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

        say(){
            console.log("動物在叫");
        }
    }
    /**
     * class Dog extends Animal
     * 此時 Animal 被稱為父類邀跃,Dog 被稱為子類
     * 繼承父類后霉咨,子類會擁有父類所有的屬性和方法
     * 通過繼承我們可以把多個類中共有的代碼寫在一個父類中
     * 這樣只需要寫一次就能讓所有的子類擁有父類的屬性和方法
     */
    // 定義一個狗類
    // 使 Dog 類繼承 Animal 類
    class Dog extends Animal{
        height: number;
        width: number;
        constructor(name: string, age: number, height: number, width: number){
            /**
             * 在子類中寫了構(gòu)造函數(shù),則在子類的構(gòu)造函數(shù)中必須調(diào)用 父類 的構(gòu)造函數(shù)(通過super調(diào)用)
             */
            super(name, age);//調(diào)用父類的構(gòu)造函數(shù)
            this.height = height;
            this.width = width;
        }
        run(){
            console.log(`${this.name},在愉快的奔跑拍屑。`);
            super.say();//調(diào)用父類的方法
        };
        /**
         * 如果子類中添加了和父類相同的方法途戒,則子類的方法會覆蓋父類的方法
         * 這種子類覆蓋掉父類的形式,我們稱之為方法的重寫
         */
        say(){
            console.log("汪汪汪---")
        };
    }
    // 定義一個貓類
    // 使 Cat 類繼承 Animal 類
    class Cat extends Animal{
        say(){
            console.log("喵喵喵---")
        };
    }
    let dog = new Dog("旺財", 4, 80, 100);
    console.log(dog);
    dog.say();
    dog.run();

    let cat = new Cat("菲菲", 3);
    console.log(cat);
    cat.say();
})();

三僵驰、抽象類

(function(){
    // 定義一個動物的類
    /**
     * 以 abstract 開頭的類就是抽象類
     * 抽象類和其他的類差別不大喷斋,只是不能用來創(chuàng)建對象
     * 抽象類就是專門用來繼承的類
     * 抽象類中可以添加抽象方法
     */
    abstract class Animal{
        name: string;
        age: number;

        constructor(name: string, age: number){
            this.name = name;
            this.age = age;
        }
        /**
         * 定義一個抽象方法
         * 抽象方法使用 abstract 開頭,沒有方法體
         * 抽象方法只能定義在抽象類中蒜茴,子類必須對抽象方法進行重寫 
         */
        abstract say(): void;
    }

    // 定義一個狗類
    class Dog extends Animal{
        height: number;
        width: number;
        constructor(name: string, age: number, height: number, width: number){
            super(name, age);//調(diào)用父類的構(gòu)造函數(shù)
            this.height = height;
            this.width = width;
        }
        say(){
            console.log("汪汪汪---")
        };
    }
    let dog = new Dog("旺財", 4, 80, 100);
    console.log(dog);
    dog.say();
})();

四星爪、接口

(function(){
    /**
     * 接口用來定義一個類結(jié)構(gòu),用來定義一個類中應(yīng)包含那些屬性和方法
     * 接口定義類的時候限制了類的結(jié)構(gòu)
     * 屬性: 接口中所有的屬性都不能有實際的值
     *       接口只定義對象的結(jié)構(gòu)粉私,而不考慮實際值
     * 方法: 接口中所有的方法都是抽象方法
     */
    interface myInter{
        name: string;

        say(): void;
    }

    /**
     * 定義類時可以實現(xiàn)接口
     * 實現(xiàn)接口就是使類滿足接口 定義的類結(jié)構(gòu)
     */
    class MyClass implements myInter{
        name: string;

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

        say(): void{
            console.log("大家好M缣凇!诺核!")
        }
    }
})();

五抄肖、屬性的封裝

(function(){
    // 定義一個人類
    class Person{
        /**
         * TS 可以在屬性前添加屬性修飾符
         * public 修飾的屬性可以在任意位置訪問(修改) 默認值
         * private 私有屬性久信,只能在類內(nèi)部進行訪問(修改)
         *      通過在類中添加方法,使得私有屬性可被外部訪問
         * protected 受保護的屬性漓摩,只能在當(dāng)前類和當(dāng)前類的子類中訪問(修改)
         */
        private _name: string;
        private _age: number;
        protected height: number

        constructor(name: string, age: number, height: number){
            this._name = name;
            this._age = age;
            this.height = height;
        }

        // 定義一個方法,用來獲取 age 屬性
        getAge(){
            return this._age;
        }
        // 定義一個方法,用來設(shè)置 age 屬性
        setAge(age: number){
            if(age >= 0){
                this._age = age;
            }
        }

        // TS中 getter 的方式獲取屬性
        get name(){
            return this._name;
        }
        // TS中 setter 的方式獲取屬性
        set name(name: string){
            this._name = name;
        }
    }

    class Students extends Person{
        getHeight(){
            return this.height;
        }
    }

    let stu = new Students("學(xué)生", 18, 176);
    console.log(stu.getHeight())
    
    /**
     * 現(xiàn)在屬性值是在對象中設(shè)置的裙士,屬性值可以任意的的被修改
     * 屬性值可以任意被修改將會導(dǎo)致對象中的數(shù)據(jù)非常不安全
     */
    let per = new Person("LBipanda", 18, 178)
    console.log(per);
    per.getAge();
    per.setAge(22);

    console.log(per.name);
    console.log(per.name = "wudi");
})();
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市幌甘,隨后出現(xiàn)的幾起案子潮售,更是在濱河造成了極大的恐慌,老刑警劉巖锅风,帶你破解...
    沈念sama閱讀 221,695評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件酥诽,死亡現(xiàn)場離奇詭異,居然都是意外死亡皱埠,警方通過查閱死者的電腦和手機肮帐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來边器,“玉大人训枢,你說我怎么就攤上這事⊥桑” “怎么了恒界?”我有些...
    開封第一講書人閱讀 168,130評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長砚嘴。 經(jīng)常有香客問我十酣,道長,這世上最難降的妖魔是什么际长? 我笑而不...
    開封第一講書人閱讀 59,648評論 1 297
  • 正文 為了忘掉前任耸采,我火速辦了婚禮,結(jié)果婚禮上工育,老公的妹妹穿的比我還像新娘虾宇。我一直安慰自己,他們只是感情好如绸,可當(dāng)我...
    茶點故事閱讀 68,655評論 6 397
  • 文/花漫 我一把揭開白布嘱朽。 她就那樣靜靜地躺著,像睡著了一般怔接。 火紅的嫁衣襯著肌膚如雪燥翅。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,268評論 1 309
  • 那天蜕提,我揣著相機與錄音,去河邊找鬼靶端。 笑死谎势,一個胖子當(dāng)著我的面吹牛凛膏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播脏榆,決...
    沈念sama閱讀 40,835評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼猖毫,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了须喂?” 一聲冷哼從身側(cè)響起吁断,我...
    開封第一講書人閱讀 39,740評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎坞生,沒想到半個月后仔役,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,286評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡是己,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,375評論 3 340
  • 正文 我和宋清朗相戀三年又兵,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卒废。...
    茶點故事閱讀 40,505評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡沛厨,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出摔认,到底是詐尸還是另有隱情逆皮,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布参袱,位于F島的核電站电谣,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蓖柔。R本人自食惡果不足惜辰企,卻給世界環(huán)境...
    茶點故事閱讀 41,873評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望况鸣。 院中可真熱鬧牢贸,春花似錦、人聲如沸镐捧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽懂酱。三九已至竹习,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間列牺,已是汗流浹背整陌。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人泌辫。 一個月前我還...
    沈念sama閱讀 48,921評論 3 376
  • 正文 我出身青樓随夸,卻偏偏與公主長得像,于是被迫代替她去往敵國和親震放。 傳聞我的和親對象是個殘疾皇子宾毒,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,515評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 1. 類的定義 TypeScript中的類和ES6中類的定義類似,但是也有區(qū)別 對象屬性設(shè)置的時候需要在后面打上...
    淺憶_0810閱讀 357評論 0 1
  • 先看兩篇文章關(guān)于 ES5 原型鏈的殿遂,寫的特別好诈铛,圖畫的就更好了,參考資料:幫你徹底搞懂JS中的prototype墨礁、...
    CondorHero閱讀 456評論 0 1
  • 傳統(tǒng)的JavaScript程序使用函數(shù)和基于原型的繼承來創(chuàng)建可重用的組件幢竹,但對于熟悉使用面向?qū)ο蠓绞降某绦騿T來講就...
    2o壹9閱讀 610評論 0 50
  • javascript提供構(gòu)造函數(shù)和原型的方式來構(gòu)造復(fù)用組件; TypeScript提供類的概念饵溅;共同點都要實例化妨退;...
    葉向晚77閱讀 1,408評論 0 1
  • 夜鶯2517閱讀 127,724評論 1 9