中文網：https://www.tslang.cn/

官網：http://www.typescriptlang.org/

目錄：

• Typescript 學習筆記一：介紹、安裝、編譯
• Typescript 學習筆記二：資料型別
• Typescript 學習筆記三：函式
• Typescript 學習筆記四：回憶Es5 中的類
• Typescript 學習筆記五：類
• Typescript 學習筆記六：介面
• Typescript 學習筆記七：泛型

類的定義

• ES5 中定義：

function Person (name) {
  this.name=name;
  this.run = function () {
    console.log(this.name)
  }
}

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

• ts 中定義：
  使用class關鍵詞。

class Person {
  name:string; // 屬性，前面省略了 public 關鍵詞
  
  constructor (name:string) { // 建構函式，例項化類的時候觸發的方法
    this.name = name;
  }

  run ():void {
    console.log(`${this.name}在運動`);
  }

  getName ():string {
    return this.name;
  }

  setName (name:string):void {
    this.name = name;
  }
}
let p = new Person('李四');
p.run();
p.setName('王五');
console.log(p.getName());
 

繼承

使用關鍵詞extends、super。

// 父類
class Person {
  name:string; // 屬性，前面省略了 public 關鍵詞
  
  constructor (name:string) { // 建構函式，例項化類的時候觸發的方法
    this.name = name;
  }

  run ():void {
    console.log(`${this.name}在運動`);
  }
}
let p = new Person('李四');
p.run(); // 李四在運動

// 子類繼承父類
class Child extends Person {
  constructor (name:string) {
    super(name); // 初始化父類的建構函式
  }
}
let c = new Child('週六');
c.run(); // 週六在運動
 

父類的方法和子類的方法一致，子類會執行子類自己的方法

// 父類
class Person {
  name:string; // 屬性，前面省略了 public 關鍵詞
  
  constructor (name:string) { // 建構函式，例項化類的時候觸發的方法
    this.name = name;
  }

  run ():void {
    console.log(`${this.name}在運動`);
  }
}
let p = new Person('李四');
p.run(); // 李四在運動

// 子類繼承父類
class Child extends Person {
  constructor (name:string) {
    super(name); // 初始化父類的建構函式
  }

  run ():void {
    console.log(`${this.name}在運動--子類`);
  }

  work ():void {
    console.log(`${this.name}工作--子類`);
  }
}
let c = new Child('週六');
c.run(); // 週六在運動--子類
c.work(); // 週六在工作--子類

類裡面的修飾符

Typescript 裡面定義屬性的時候給我們提供了三種修飾符：

• public：公有，在當前類裡面、子類、類外面都可以訪問
• protected：保護型別，在當前類裡面、子類裡面可以訪問，在類外部沒法訪問

• private：私有，在當前類裡面可以訪問，子類、類外部都沒法訪問
  屬性如果不加修飾符，預設就是公有（public）

• public：公有，在當前類裡面、子類、類外面都可以訪問

class Person {
  public name:string; // 公有
  
  constructor (name:string) {
    this.name = name;
  }

  run ():void {
    console.log(`${this.name}在運動`); // 在類裡能訪問
  }
}
let p = new Person('李四');
p.run();
console.log(p.name); // 在類外面能訪問

class Child extends Person {
  constructor (name:string) {
    super(name);
  }

  run ():void {
    console.log(`${this.name}在運動--子類`); // 子類能訪問
  }
}
let c = new Child('週六');
c.run(); // 週六在運動--子類
console.log(c.name); // 在類外面能訪問

• protected：保護型別，在當前類裡面、子類裡面可以訪問，在類外部沒法訪問

class Person {
  protected name:string; // 保護
  
  constructor (name:string) {
    this.name = name;
  }

  run ():void {
    console.log(`${this.name}在運動`); // 在類裡能訪問
  }
}
let p = new Person('李四');
p.run();
// console.log(p.name); // 報錯，在類外面不能訪問

class Child extends Person {
  constructor (name:string) {
    super(name);
  }

  run ():void {
    console.log(`${this.name}在運動--子類`); // 子類能訪問
  }
}
let c = new Child('週六');
c.run(); // 週六在運動--子類
// console.log(c.name); // 報錯，在類外面能訪問

• private：私有，在當前類裡面可以訪問，子類、類外部都沒法訪問

class Person {
  private name:string; // 私有
  
  constructor (name:string) {
    this.name = name;
  }

  run ():void {
    console.log(`${this.name}在運動`); // 在類裡能訪問
  }
}
let p = new Person('李四');
p.run();
// console.log(p.name); // 報錯，在類外面不能訪問

class Child extends Person {
  constructor (name:string) {
    super(name);
  }

  run ():void {
    // console.log(`${this.name}在運動--子類`); // 報錯，子類能訪問
  }
}
let c = new Child('週六');
c.run(); // 週六在運動--子類
// console.log(c.name); // 報錯，在類外面能訪問

靜態屬性 靜態方法

• ES5

function Person (name) {
  this.name = name;
}
Person.age = 24; // 靜態屬性
Person.run = function () { // 靜態方法
  console.log(Person.age);
}
Person.run(); // 靜態方法的呼叫

• jquery

$('#box').css('color', 'red'); // 例項方法
$.get('url', function () { // 靜態方法

})

$(element) { // 例項
  return new Base(element);
}
$.get = function (url, callback) { // 靜態方法

}
function Base (element) {
  this.element = element;
  this.css = function (attr, value) {
    this.element.style[attr] = value;
  }
}

• ts

class Person {
  public name:string; // 公有
  public age:number = 25;

  static sex:string = 'man'; // 靜態屬性

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

  public run ():void { // 公有方法
    console.log(`${this.name}在運動`); // 在類裡能訪問
  }

  // 靜態方法
  static print ():void {
    console.log(`靜態方法，性別：${Person.sex}`);
  }
}
// 靜態屬性和方法的呼叫
console.log(Person.sex);
Person.print(); // 靜態方法，性別：man

多型

多型：父類定義一個方法不去實現，讓繼承它的子類去實現，每一個子類有不同的表現。

多型屬於繼承。

class Animal {
  name:string;

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

  eat () { // 具體吃什麼,不知道。具體吃什麼，由繼承它的子類去實現，每一個子類的表現不一樣
    console.log('吃的方法');
  }
}

class Dog extends Animal {
  constructor (name:string) {
    super(name);
  }

  eat () { // 子類實現父類的 eat 方法
    console.log(`${this.name}喜歡吃骨頭`);
  }
}

class Cat extends Animal {
  constructor (name:string) {
    super(name);
  }

  eat () { // 子類實現父類的 eat 方法
    console.log(`${this.name}喜歡吃老鼠`);
  }
}

抽象類

• Typescript 中的抽象類：它是提供其他類繼承的基類，不能直接被例項化。
• 用abstract關鍵字定義抽象類和抽象方法，抽象類中的抽象方法不包含具體實現並且必須在派生類（子類）中實現。
• abstract 抽象方法只能放在抽象類裡面。
• 抽象類和抽象方法用來定義標準。比如：標準：Animal 這個類要求它的子類必須包含eat 方法。

// 抽象類，標準
abstract class Animal {
  name:string;

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

  abstract eat ():any; // 抽象方法不包含具體實現並且必須在派生類中實現。
}
// let animal = new Animal(); // 錯誤，抽獎類不能被例項化

class Dog extends Animal {
  constructor (name:string) {
    super(name);
  }

  eat () { // 抽象類的子類必須實現抽象類裡面的抽象方法
    console.log(`${this.name}喜歡吃骨頭`);
  }
}
let dog = new Dog('小黑');
dog.eat();