TypeScript類與繼承和修飾符就是這樣簡單

本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！

1.我理解的類

類能夠理解成爲一個模板，經過這個模板能夠實例化某一個具體對象
好比說：咱們定義一個動物類，
經過這個動物模板能夠實例化成爲貓或者其餘具體的動物
複製代碼

2.類的基本使用

咱們須要建立一個動物類；
這個動物有姓名、【默認值小可愛，字符串類型】
年齡、【默認值 20，數字類型】
性別、【字符串類型】
體重、【數字類型】
愛好【愛好無關緊要，若是有必須是一個數組類型的】
這個動物類還有一個say的實例方法
下面咱們就開始實現
複製代碼

class Animails {
    name: string
    age: number
    gender: string
    weight: string
    likes?: Array<any>
    //愛好這個屬性無關緊要，若是有必須是數組類型
    // 定義構造函數：爲了未來實例化對象的時候，

    // 構造器直接對屬性進行初始化
    // 須要給名稱默認值小可愛、年齡默認值age=20
    constructor(
        name: string = '小可愛',
        age: number = 20,
        gender: string,
        weight: string,
        likes?: Array<any>
    ) {
        // 初始化屬性中的數據
        this.name = name
        this.age = age
        this.gender = gender
        this.weight=weight
    }
    // 定義實例方法
    say() {
        console.log(
            `你們好我是${this.name},
            今年${this.age}歲了,
            性別:${this.gender},
            體重:${this.weight},
        `);
    }
}
// 實例化對象
let pig = new Animails('豬豬俠', 10, '男', '30kg');
pig.say();//調用實例方法
複製代碼

3.實例化類的注意點

當類中的屬性都有默認值時，
實例化對象的時候，
能夠不用進行進行初始化。
類中的屬性若是沒有默認值，不是可選屬性。必須一一賦值(初始化)
就是說:
咱們必須對構造器中的屬性進行一一賦值
除非構造器中有默認值
複製代碼

class Animails {
    name: string
    age: number
    constructor(
        name: string = '小可愛',
        age: number = 20,
    ) {
        // 初始化屬性中的數據
        this.name = name
        this.age = age
    }
    // 定義實例方法
    say() {
        console.log( `你們好我是${this.name}, 今年${this.age}歲了, `);
    }
}
// 實例化對象
let pig = new Animails();
pig.say();//調用實例方法
複製代碼

4.類與類之間的繼承

A類繼承了B類，那麼A類叫作子類；B類叫作基類
子類--->又叫派生類
基類--->又叫父類或者超類
複製代碼

下面這個例子咱們將子類MySon將會去繼承Father父類。
子類有屬於本身的方法sonsay；
子類能夠去調用父類的方法super.say('子類');
同時咱們在子類中將會去重寫父類的方法
複製代碼

// 咱們定義了一個超類【父類】
class Father {
    // 定義屬性
    name: string
    age: number
    // 定義構造函數
    constructor(name: string, age: number) {
        // 初始化屬性中的數據
        this.name = name
        this.age = age
    }
    // 定義實例方法
    say(str:string) {
        console.log( `你們好我是${this.name}, 今年${this.age}歲了，${str}呼喊的我 `);
    }
}

// 子類去繼承了父類
class MySon extends Father {
    // constructor中的參數必需要知足父類。
    // 除非父類有默認參數或者父類中的屬性不是必須屬性。
    constructor(name: string, age: number) {
        // super調用父類中的構造函數
        super(name,age)
    }
    // 子類中本身的實例方法
    sonsay() {
        console.log('我是子類哈哈');
        //調用父類中的實例方法
        super.say('子類');
    }

    // 重寫父類的方法
    say(name:string) {
        console.log(`我重寫了父類的方法我是${name}`)
    }
}
// 進行實例化
let xiaoming = new MySon('小明', 19);
// 進行方法調用 
xiaoming.sonsay();
xiaoming.say('小明');
複製代碼

5.修飾符的理解

修飾符:主要用於描述類中的成員(屬性、方法、構造函數，)的可訪問行
當一個類的成員變量沒有修飾的時候,
默認的就是 public 進行修飾。
外界是能夠進行訪問的。任何位置均可以訪問類中的成員

private 屬性【只可以】在父類的內部直接進行訪問;
class Person{
    age:10
    // private 屬性只可以 在類的內部 進行訪問;
    private name = "張三" 
    say() {
        console.log("個人名字是"+this.name)
    }
}
複製代碼

6.private的理解

若是父類定義的私有屬性或者方法的時候,
那麼繼承的子類是不能夠訪問父類中的私有屬性和私有方法
在實例化的時候也是不能夠訪問私有屬性和私有方法

子類繼承父類後 
訪問父類屬性經過this.屬性名
調用父類的方法 this.方法名

下面咱們看一下：
子類是否能夠訪問父類中的私有屬性？
實例化後是否能夠訪問父類中的私有屬性？
複製代碼

class Person {
    age: 10;
    // private 屬性只可以在類的內部進行訪問;
    private name = "張三";
    say() {
      //內部訪問是ok的哈
      console.log("個人名字是" + this.name);
    }
}
class Children extends Person {
    sayage() {
        console.log('訪問父類屬性年齡',this.age)
    }
    // 下面這種訪問是非法的會報錯 
    sayname() {
        console.log('訪問父類屬性姓名',this.name)
    }
}
var xm = new Children();
xm.say();//個人名字是張三
// 報錯，由於name是父類私有的，
// 實例化的時候不可以進行訪問 
console.log( xm.name )
複製代碼

7.protected 的理解

protected修飾的屬性和方法是受保護的,
只可以在父類和其子類中訪問。
實例化後是不可以訪問protected所修飾的屬性和方法
複製代碼

class Person {
    protected age:string
    constructor(age:string) {
      this.age=age
    }
    say() {
        console.log("個人年齡是" + this.age);
    }
}

// 繼承父類
class Children extends Person {
    callPar() {
      super.say(); //super 能夠調用父類中的屬性方法
    }
    hello() {
      console.log("我今年" + this.age);
    }
}

var xm = new Children('10');
xm.hello(); //我今年10
<!-- 提示 屬性「age」受保護，只能在類「Person」及其子類中訪問 -->
console.log(xm.age)
複製代碼