TypeScript Class All In One

TypeScript Class All In One

Class

// menber / property 初始化 ✅
class Human {
  name: string = '';
  constructor(name: string) {
    this.name = name ?? Human.name;
    // this.name = name ?? Human.constructor.name;
  }
}

// class constructor 初始化 ✅
class Human {
  name: string;
  constructor(name: string) {
    this.name = name ?? Human.name;
    // this.name = name ?? Human.constructor.name;
  }
}

// 类 implements 接口 

interface Human {
  name: string;
}

class Person implements Human {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// 类 implements  多个接口 

interface Animal {
  year: string;
}

interface Human {
  name: string;
  // age: number | undefined;
  age?: number;
}

class Person implements Human, Animal {
  name: string;
  age: number;
  year: string;
  constructor(options: {
    name: string,
    age: number,
    year: string,
  }) {
    const { name, age, year } = options;
    this.name = name;
    this.age = age;
    this.year = year;
  }
}

// 类 implements  一个 Type Alias

type Human = {
  name: string;
  // age: number | undefined;
  age?: number;
}

class Person implements Human {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// 类 implements 多个 Type Alias

type Animal = {
  year: string;
}

type Human = {
  name: string;
  // age: number | undefined;
  age?: number;
}

class Person implements Human, Animal {
  name: string;
  age: number;
  year: string;
  constructor(options: {
    name: string,
    age: number,
    year: string,
  }) {
    const { name, age, year } = options;
    this.name = name;
    this.age = age;
    this.year = year;
  }
}

// 子类 extends 父类, 调用 super
class Human {
  name: string = '';
  // age: number | undefined;
  age?: number;
}

class Person2 extends Human {
  name: string;
  age: number;
  constructor(options: {
    name: string,
    age: number,
    year: string,
  }) {
    super();
    const { name, age } = options;
    this.name = name;
    this.age = age;
  }
}

// 子类 extends 多个父类 ❌  不可以，只能继承一个父类


class Animal {
  year: string = '';
}

class Human {
  name: string = '';
  // age: number | undefined;
  age?: number;
}

// Classes can only extend a single class.(1174) ❌
class Person2 extends Human, Animal {
  name: string;
  age: number;
  year: string;
  constructor(options: {
    name: string,
    age: number,
    year: string,
  }) {
    const { name, age, year } = options;
    this.name = name;
    this.age = age;
    this.year = year;
  }
}

// 类 implements  多个父类 ✅

class Animal {
  year: string = '';
}

class Human {
  name: string = '';
  // age: number | undefined;
  age?: number;
}

class Person implements Human, Animal {
  name: string;
  age: number;
  year: string;
  constructor(options: {
    name: string,
    age: number,
    year: string,
  }) {
    const { name, age, year } = options;
    this.name = name;
    this.age = age;
    this.year = year;
  }
}

class init value solutions

demo code

class Plant {
  name: string;
  // ❌ Property 'name' has no initializer and is not definitely assigned in the constructor.ts(2564)
}

1. add 'undefined' type

class Plant {
  name: string | undefined;
}

2. add definite assignment assertion

class Plant {
  name!: string;
}

3. declare with init value 👍

class Plant3 {
  name: string = '';
}

4. use the constructor with an init value 👍

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

5. use the constructor and init value by params 👍

class Plant {
  name: string;
  constructor(name: string) {
    this.name = name ?? '';
  }
}

tsconfig.json

not recommended

{
  "compilerOptions": {
+   "strictPropertyInitialization": false,
-   "strictPropertyInitialization": true,
  }
}

Abstract Class

1. 抽象类: 只能被继承，不能被实例化的类;

abstract class Animal {
  constructor() {
    // 
  }
}

const cat = new Animal();
// Cannot create an instance of an abstract class.(2511) ❌ 

2. 代码逻辑复用， 在抽象类中定义一个方法并实现，子类就可以直接使用，而不用重复实现

abstract class Animal {
  constructor() {}
  // 抽象方法
  abstract speak(): void;
  // 代码复用，定义公用方法并实现
  eat(food: string): void{
    console.log("eat =", food);
  }
}

class Dog extends Animal {
  food: string = '';
  // override 字类覆盖父类方法
  constructor(food: string) {
    super();
    // super
    super.eat(food);
  }
  override speak() {
    console.log("wang!");
  }
}
const puppy = new Dog('meat');
puppy.speak();
puppy.eat('🐶');

class categories extends Animal {
  food: string = '';
  // override 字类覆盖父类方法
  constructor(food: string) {
    super();
    // this
    this.eat(food);
  }
  override speak() {
    console.log("wang!");
  }
}
const kitty = new Dog('fish');
kitty.speak();
kitty.eat('😸');

3. 抽象方法(多态) 在抽象类中定义一个方法但不具体实现，形成一个抽象方法, 在子类中的实现方式可以多种多样

abstract class Animal {
  constructor() {}
  // 抽象方法
  abstract speak(): void;
}

class Dog extends Animal {
  // override 字类覆盖父类方法
  override speak() {
    console.log("wang!");
  }
}
const puppy = new Dog();
puppy.speak();


class Cat extends Animal {
  // overirde
  override speak() {
    console.log("miao!");
  }
}
// hello kitty
cont kitten = new Cat();
kitten.speak();

demo

singleton pattern / 单例模式

class Human {
  // 初始化
  private static isExist: boolean = false;
  // 未初始化
  private static instance: Human;
  // public name: string
  name: string
  // 私有构造器函数，不可以通过 new 创建类的实例
  private constructor(name: string) {
    this.name = name;
  }
  // public static createInstance() {
  static createInstance(name: string) {
    if (!Human.isExist) {
      Human.isExist = true;
      // this.instance = new Human(name);
      Human.instance = new Human(name);
    } else {
      // ignore
    }
    console.log(this.instance === Human.instance);
    // return this.instance;
    return Human.instance;
  }
}

// const human = new Human('eric');
// Constructor of class 'Human' is private and only accessible within the class declaration.ts(2673)

const h1 = Human.createInstance('abc');
const h2 = Human.createInstance('xyz');

log('h1 name', h1.name);
log('h2 name', h2.name);

refs

https://www.typescriptlang.org/docs/handbook/classes.html

https://www.typescriptlang.org/docs/handbook/2/classes.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---