TypeScript Classes All In One

TypeScript Classes All In One

// class Employee {
//   constructor(name: string) {
//     this.name = name;
//     // Property 'name' does not exist on type 'Employee'.ts(2339)
//   }
// }

class Employee {
  // name: string;
  name: string = '';
  // age?: number;
  age?: number = 0;
  constructor(name: string, age?: number) {
    this.name = name;
    if (age) {
      this.age = age;
    }
  }
  greet() {
    console.log(`employee name = ${this.name}`);
  }
  getAge() {
    console.log('age =', this.age);
  }
}

const em = new Employee('xgqfrms');
em.name;
em.greet();

em.age;
em.getAge();

class Manager extends Employee {
  private title: string;
  constructor(name: string, title: string) {
    super(name);
    this.title = title;
  }
  getTitle() {
    console.log('title =', this.title);
  }
}

const ma = new Manager('xgqfrms', 'CTO');
// ma.title;
// Property 'title' is private and only accessible within class 'Manager'.ts(2341)
ma.getTitle();

TypeScript 多接口继承

interface IParent1 { 
  v1:number;
}
 
interface IParent2 { 
  v2:number; 
}

// 多接口继承语法格式：继承的各个接口使用逗号 , 分隔。
interface Child extends IParent1, IParent2 {
  // 
}

const Iobj:Child = {
  v1: 1,
  v2: 2,
} 

console.log("value 1: " + Iobj.v1 + " value 2: "+ Iobj.v2)

access modifier

访问修饰符: public / private / protected

类：static

class UFO {
  public name: string = '';
  private id?: number = 0;
  constructor(name: string, id?: number) {
    this.name = name;
    if (id) {
      this.id = id;
    }
  }
  protected getName() {
    console.log(`UFO name = ${this.name}`);
  }
  getId() {
    console.log('UFO id =', this.id);
  }
  getAll() {
    this.getName();
    this.getId();
  }
}


// const ufo = new UFO('ufo', 007);
/*

Octal literals are not allowed in strict mode.ts(1121)
Octal literals are not available when targeting ECMAScript 5 and higher. Use the syntax '0o7'.ts(1085)
*/

const ufo = new UFO('ufo', 7);
ufo.name;
ufo.getId();
// ufo.getName();
// Property 'getName' is protected and only accessible within class 'UFO' and its subclasses.ts(2445)
ufo.getAll();

const ufo_binary = new UFO('ufo', 0b111);
const ufo_octal = new UFO('ufo', 0o007);
const ufo_hex = new UFO('ufo', 0x007);

class SpaceShip extends UFO {
  private uid: string = '2048';
  constructor(name: string, id?: number) {
    super(name, id);
  }
  static log(value: any) {
    console.log('static value =', value);
  }
  getUid() {
    console.log('private uid =', this.uid);
  }
  // 改写 getAll
  getAll(): void {
    this.getName();
    this.getId();
    // this.getAll();
    this.getUid();
  }
}

const ss = new SpaceShip('ss', 2022);
ss.name;
// ss.getName();
// Property 'getName' is protected and only accessible within class 'UFO' and its subclasses.ts(2445)
ss.getId();
ss.getUid();
ss.getAll();

static members (properties and methods)

静态成员（静态属性和静态方法）

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#static_methods_and_properties

The static keyword defines a static method or property for a class. Static members (properties and methods) are called without instantiating their class and cannot be called through a class instance. Static methods are often used to create utility functions for an application, whereas static properties are useful for caches, fixed-configuration, or any other data you don't need to be replicated across instances.

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static displayName = "Point";
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
p1.displayName; // undefined
p1.distance;    // undefined
p2.displayName; // undefined
p2.distance;    // undefined

console.log(Point.displayName);      // "Point"
console.log(Point.distance(p1, p2)); // 7.0710678118654755

refs

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

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

---

---

©xgqfrms 2012-2020

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

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

---