typescript 類的相關用法

類

class User {
  id: number;
  username: string;
  constructor(id: number, username: string) {
    // 通過 this 關聯實例對象
    this.id = id;
    this.username = username;
  }
}

let t = new User(1, "a");
console.log(t.id);

如果在構造函數中 提供了 public 修飾符，會自動幫我們完成上述的關聯【如果不加 public ，那麼 id 和 username 只是形參列表，外界無法訪問】

class User {
  constructor(public id: number, public username: string) {}
}
let t = new User(1, "a");
console.log(t.id);

方法的重寫和重載

• 重寫指的是 方法的參數個數和參數類型完全一樣，只是重寫了方法

class User {
  constructor(id: number, username: string) {},
  action():void{
    console.log('這是父類的 action 方法')
  }
}

class Student extends User {
  constructor(id: number, username: string,public stuno) {
    super(id, username)
  }
  // action 重寫
  action():void{
    console.log('這是子類 Student 針對 action 的重寫')
  }
}

• 重載指的是 方法的參數個數或者參數類型不一致

class User {
  constructor(id: number, username: string) {}
  action(): void {
    console.log("這是父類的 action 方法");
  }
}

class Student extends User {
  constructor(id: number, username: string, public stuno: string) {
    super(id, username);
  }
  action(): void;
  action(username: string, pwd: string): void;
  action(num1: number, num2: number): number;
  action(c1?: string | number, c2?: string | number): void | number {
    if (typeof c1 === "string" && typeof c2 === "string") {
      // 可以直接調用父類的方法【只要字類中需要重載的部分跟父類的邏輯一致，就只需要調用，不用重寫一遍】
      super.action();
      console.log("這是子類針對兩個字符參數的處理");
    } else if (typeof c1 === "number" && typeof c2 === "number") {
      console.log("這是子類針對兩個數值參數的處理");
    } else {
      super.action();
    }
  }
}

let s1 = new Student(1, "xx", "x123");
s1.action("xx", "x123");

修飾符

• public

  自身可以訪問、子類可以訪問、類外可以訪問

• protected

  自身可以訪問、子類可以訪問

• private

  自身可以訪問

• readonly

  自身可以訪問、子類可以訪問、類外可以訪問。 但是隻能在初始化的時候賦值，其餘地方不允許給它賦值。

class User {
  constructor(
    public name: string,
    protected username: string,
    private pwd: string,
    readonly email: string
  ) {}
  protected fn() {
    console.log(this.pwd); // 類自身訪問 private
  }
}

let u1 = new User("小張", "小小張", "xxx", "213@...");

console.log(u1.name);
// console.log(u1.username); // 報錯
// console.log(u1.pwd); // 報錯
console.log(u1.email);

class Student extends User {
  public fn2() {
    // console.log(this.pwd); // 報錯
    console.log(this.username);
  }
}

存取器【 setter、getter 】

class User {
  constructor(private phone: string) {}
  set passwd(phone: string) {
    this.phone = phone;
  }
  get passwd() {
    return this.phone.substring(0, 3) + "*".repeat(8);
  }
}

let u = new User("15680808819");

console.log(u.passwd);
u.passwd = "10880808819";
console.log(u.passwd);

抽象類

// 抽象類不能 new 進行實例 【因爲裏面包含有未實現的方法】
abstract class User {
  constructor(public phone: string) {}
  // 如果類中有抽象方法，那麼類也需要是抽象類【抽象類只有結構沒有實現】
  abstract getPhone(): string;
}
// 如果一個子類繼承了抽象類，那麼他就必須實現抽象類的所有方法，否則該子類也必須是抽象類
class Student extends User {
  constructor(phone: string) {
    super(phone);
  }
  getPhone(): string {
    return "";
  }
}

類 和 接口

我們之前定義的抽象類和接口有一定的類似，區別是 抽象類在編譯過後會產生實體代碼，接口不會。接口只能有結構，不能有具體的實現。typescript 中一個類只能有一個父類，但是一個類可以同時擁有多個接口