類的概念

類是用于創(chuàng)建對象的模板。他們用代碼封裝數(shù)據(jù)以處理該數(shù)據(jù)。JavaScript 中的類建立在原型上，但也具有某些語法和語義未與 ES5 類相似語義共享。

---

TypeScript 除了實現(xiàn)了所有 ES6 中的類的功能以外，還添加了一些新的用法。

關(guān)于ES6的 Class 類語法概念，在本章節(jié)不做過多闡述，感興趣的的小伙伴 可以 點擊這里，了解查看更多 ES6中有關(guān)Class的語法概念使用。

本章節(jié)還是主要給大家?guī)?，?TypeScript 中，如何去定義 Class 【類】，以及如何去使用 類身上的 屬性及方法。

定義Class ： 使用 Class 定義類，使用 constructor 定義構(gòu)造函數(shù)。

在原生 JavaScript 中

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}
new Rectangle(1, 2)   //實例化，并傳入?yún)?shù)

上面的是，在JS中，Class 類的常用定義方式。

而在TypeScript 中定義 Class 類：

class identity {
    name: string;   //TS 中需要對要接受的參數(shù)初始化
    age: number;
    constructor(name: string, age: number) {    //為要傳入的參數(shù)指定類型。不指定類型，默認(rèn)為Any 類型。
        this.name = name;
        this.age = age;
    }
    sayHi() {
        return `我叫 ${this.name},今年${this.age}歲`;
    }
}
let a = new identity('張三', 20);
console.log(a);    //Animal {name: '張三', age: 20}

console.log(a.sayHi());  //我叫 張三,今年20歲

類的繼承 ：

使用 extends 關(guān)鍵字實現(xiàn)繼承，子類中使用 super() 關(guān)鍵字來調(diào)用父類的構(gòu)造函數(shù)和方法。

class identity {   //父類
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    sayHi() {
        return `我叫 ${this.name},今年${this.age}歲`;
    }
}

//子類
class copy extends identity {   
    //由于我繼承了 identity ，在 identity 身上已經(jīng)存在了 name 和 age
    // 所以 在 copy 類里面就不用再定義 name 和 age了,繼承后可以直接讀取到,所繼承類身上的屬性方法。
    constructor(name: string, age: number) {
        super(name, age)              // super 繼承
    }
}
let c = new copy("李四", 30) //實例化子類
console.log(c);  //copy {name: '李四', age: 30}

//可以調(diào)用父類身上的方法。
console.log(c.sayHi());   //我叫 李四,今年30歲

類的存取器：

使用 getter 和 setter 可以改變屬性的賦值和讀取行為。

存取器的作用：可以用來更專注化的控制對，對象屬性方法的讀取和修改。

class identity {   //父類
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    //設(shè)置讀取器=》，用來讀取數(shù)據(jù)
    get names() {
        return "getter" + `我叫 ${this.name},今年${this.age}歲`;
    }

    //設(shè)置存儲器，用來修改數(shù)據(jù)
    set names(val: string) {
        console.log("這是set 傳入進(jìn)來的值", val);
    }
}

let a = new identity("張三", 18);
console.log(a.names);  //當(dāng)我們訪問讀取器的時候會觸發(fā)get，會直接得到返回的值 : getter張三18
a.names = "李四" //當(dāng)我們?yōu)榇鎯ζ髻x值的時候，會觸發(fā) set 并且會把，賦值，當(dāng)成參數(shù)，傳遞給 set。

使用 存儲器的好處：對屬性方法的讀取和修改，更加的專業(yè)化，不同的存取器，負(fù)責(zé)不同的邏輯處理，這里的存取器，也相似于 Vue 中的 computed 計算屬性。 以及 Object.defineProperty()的 get 和 set 方法 類似。

類的靜態(tài)方法與靜態(tài)屬性：

有時候，我們希望 類中所定義的屬性或者方法，不想被實例化后的對象讀取，不需要實例化，那么，我們就可以通過 static 關(guān)鍵字，來把 屬性或方法定義為靜態(tài)成員來實現(xiàn)。

class identity {
    static username: string = "asdasd";    //將 username  通過 static 設(shè)置為靜態(tài)屬性。并為其賦值。
    name: string
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
        console.log(this.username);  //也會報錯，類的內(nèi)部也不能拿取 username
    }

    //將方法設(shè)置為 靜態(tài)方法
    static bolkfn() {
        console.log("靜態(tài)方法");
    }
}



let a = new identity("張三", 18);

console.log(identity.username);  // 類自身訪問靜態(tài)屬性，不會報錯

console.log(a.username);      //實例對象訪問靜態(tài)屬性，會報錯 ：屬性“username”在類型“identity”上不存在。


console.log(identity.bolkfn());  // 類自身訪問靜態(tài)方法，不會報錯

console.log(a.bolkfn());      //實例對象訪問靜態(tài)方法，會報錯 ：屬性“bolkfn”在類型“identity”上不存在。

擴(kuò)展知識點：

在ES7 中有一些關(guān)于類的新特性提案，TypeScript 也實現(xiàn)了它們，這里做一個簡單的介紹。

ES6 中實例的屬性只能通過構(gòu)造函數(shù)中的 this.xxx 來定義，而在 ES7 提案中可以直接在類里面定義：

class Animal {
  name = 'Jack';  //可以直接在類中定義，非必須要在 constructor 通過 this.name 來定義。

  constructor() {
    // ...
  }
}

let a = new Animal();
console.log(a.name); // Jack 可以直接讀取到name屬性 

類的修飾符：

TypeScript 可以使用三種訪問修飾符（Access Modifiers），分別是 public、private 和 protected。

• public :修飾的屬性或方法是公有的，可以在任何地方被訪問到，默認(rèn)所有的屬性和方法都是 public 的
• private 修飾的屬性或方法是私有的，不能在聲明它的類的外部訪問，雖然 子類 可以通過 extends 繼承它的私有屬性，但是卻無法讀取。
• protected : 修飾的屬性或方法是受保護(hù)的，它和 private 類似，區(qū)別是它在子類中也是允許被訪問的，也依然無法在外部訪問

例：
public ：

class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
}
let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom

private ：

class Animal {
    private name;   //設(shè)置私有化
    public constructor(name) {
        this.name = name;
    }
}

let a = new Animal('Jack');
console.log(Animal.name);  //只能自身讀取

console.log(a.name);  //報錯
a.name = 'Tom';   //報錯

即使通過子類繼承，在子類繼承中也不能訪問讀取

class Animal {
  private name;
  public constructor(name) {
    this.name = name;
  }
}
class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);   //報錯，子類繼承中也無法訪問私有化數(shù)據(jù)
  }
}

當(dāng)構(gòu)造函數(shù)修飾為 private 時，該類 不 允許被繼承或者實例化：

class Animal {
    public name;
    private constructor(name) {  //構(gòu)造函數(shù) private 私有化
      this.name = name;
    }
  }
  class Cat extends Animal {  //報錯不能被繼承
    constructor(name) {
      super(name);
    }
  }
  
  let a = new Animal('Jack');  //報錯，不應(yīng)該被實例化

protected：

當(dāng)使用 protected 修飾，則 允許 在子類中訪問：

class Animal {
  private name;
  public constructor(name) {
    this.name = name;
  }
}
class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);   //不會報錯,子類繼承中可以訪問
  }
}

當(dāng)構(gòu)造函數(shù)修飾為 protected 時，該類只允許被繼承：

class Animal {
    public name;
    protected constructor(name: string) {
        this.name = name;
    }
}
class Cat extends Animal {
    constructor(name: string) {
        super(name);
    }
}

let a = new Animal('Jack');  //報錯，因為  Animal 只允許被繼承。

參數(shù)屬性：

上面，介紹的三種 修飾符，其實還有一種簡潔的寫法，被稱為 屬性參數(shù)寫法；修飾符還可以使用在構(gòu)造函數(shù)參數(shù)中，等同于類中定義該屬性同時給該屬性賦值，使代碼更簡潔。

class Animal {
    // public name;   //可以省略此處
    protected constructor(public name: string) {  //  private   protected  同理
        // this.name = name;   //可以省略此處
    }
}

readonly : 只讀屬性關(guān)鍵字，只允許出現(xiàn)在屬性聲明或索引簽名或構(gòu)造函數(shù)中。

class Animal {
  readonly name;
  public constructor(name) {
    this.name = name;
  }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';    //會報錯，因為屬性為 只讀的，不能修改。

注意;
注意如果 readonly 和其他訪問修飾符同時存在的話，需要寫在其后面。

class Animal {
  // public readonly name;
  public constructor(public readonly name) {
    // this.name = name;
  }
}

抽象類：

概念：抽象類的概念是，專注于用來為子類服務(wù)的，抽象類是不允許被實例化的，只能通過被子類繼承。
語法：abstract 關(guān)鍵字用于定義抽象類和其中的抽象方法

abstract class Animal {  // 通過 abstract  定義一個抽象類
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();    //并且在抽象類里面，還可以定義 抽象方法
}

let a = new Animal('Jack');  //會報錯，抽象類不能被實例化

注意：抽象類中的抽象方法或?qū)傩员仨毐蛔宇悓崿F(xiàn)，否則在子類繼承抽象類后，實例化的時候會報錯

abstract class Animal {  // 通過 abstract  定義一個抽象類
    public name;
    public constructor(name) {
        this.name = name;
    }
    public abstract sayHi() { };    //并且在抽象類里面，還可以定義 抽象方法
}


class B extends Animal {
    public sayHi() {   //抽象類中，所定義抽象方法，必須要在子類中實現(xiàn)。
        console.log("繼承Animal");

    }
}
let isB = new B("")

類的類型:

給實例化的類，定義類型，簡述而言，就是定義的 class 類，還可以被用來當(dāng)做 一種類型，賦值給實例化的對象，用來校驗類的數(shù)據(jù)完整性。

案例說明:

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHi(): string {
    return `My name is ${this.name}`;
  }
}

// 把 Animal  當(dāng)做一種類型，用來校驗實例化對象 a 的規(guī)范性。
let a: Animal = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack

總結(jié)：

本章節(jié)，主要給大家介紹了，在 TypeScript 中，如何去聲明 class 類，以及對 class 類的主要運(yùn)用解析。歡迎大家交流評論。

???♂? 博主座右銘：向陽而生，我還在路上！
——————————————————————————————
??博主想說：將持續(xù)性為社區(qū)輸出自己的資源，同時也見證自己的進(jìn)步！
——————————————————————————————
???♂? 如果都看到這了，博主希望留下你的足跡！【??收藏！??點贊！??評論！】
——————————————————————————————文章來源地址http://www.zghlxwxcb.cn/news/detail-629530.html

到了這里，關(guān)于【TypeScript】中定義與使用 Class 類的解讀理解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！