TypeScript 类

定义与继承

// 类的属性和方法
class Person2 {
  name: string = "ting";
  getName() {
    return this.name;
  }
}
const person2 = new Person2();
console.log(person2.getName());

// 类的继承
// 会继承上一级的方法
// 重写：父类的方法和属性重写
// super == 父类(子类重写父类，调用父类的方法)
class Teacher2 extends Person2 {
  getName() {
    return super.getName() + "tingting";
  }
  getTeacherName() {
    return "fuq";
  }
}
const teacher2 = new Teacher2();
console.log(teacher2.getName());
console.log(teacher2.getTeacherName());

类中的访问类型和构造器

/**
 * private
 * 允许在类内使用/类外不行
 */
class Person4 {
  private name: string = "";
  sayHi() {
  	// 类内可以使用
    this.name;
    console.log("private,hi");
  }
}

/**
 * protected
 * 允许在类内及继承的字类中使用/类外不行
 */
class Person5 {
  protected name: string = "123";
  sayHi() {
  	// 类内可以使用
    this.name;
    console.log("protected,hi");
  }
}
class Tearcher extends Person5 {
  public sayhello() {
  	// 继承可以使用
    console.log("protected,hello", this.name);
  }
}
let tea = new Tearcher();
tea.sayhello();

/**
 * public
 * 允许我在类的内外被调用
 */
class Person3 {
  name: string = "";
  sayHi() {
    console.log("hi");
  }
}
const person3 = new Person3();
person3.name = "ting";
console.log(person3.name);
console.log(person3.sayHi());

/**
 * 构造器
 * constructor
 * new一个实例的瞬间就会执行
 */
class Person6 {
  // 构造器赋值 传统写法
  constructor(name: string) {
    this.name = name;
  }
  public name: string = "";
}
const person6 = new Person6("ting");
console.log(person6.name);

// 构造器参数+访问类型
class Person7 {
  // 构造器赋值 简化写法 等价于上面两个语句
  constructor(public name: string) {}
}
const person7 = new Person7("ting");
console.log(person7.name);

class Person8 {
  // 构造器赋值 简化写法 等价于上面两个语句
  constructor(public name: string) {}
}

class Teacher8 extends Person8 {
  constructor(name: string, age: number) {
  	// 调用Person8的构造器赋值
    super(name);
  }
}
const teacher = new Teacher8("ting", 28);
console.log(teacher.name);

静态设置

/**
 * 封装
 * 将属性私有化
 * 使用 set/get 抛出属性
 */
class Person9 {
  constructor(private _name: string) {}
  // 可以加工后发送
  get name() {
    return this._name;
  }
  set name(name: string) {
    const realName = name.split(" ")[0];
    this._name = realName;
  }
}
const person9 = new Person9("ting");
console.log(person9.name);
person9.name = "zss tt";
console.log(person9.name);

/**
 * static静态属性 static
 * 单例模式
 */
class Demo {
  // 挂在类上的属性
  // 定义私有的静态类型为Demo的属性instance
  private static instance: Demo;
  // 规避使用new 创建实例的情况 将构造函数私有化
  private constructor() {}
  // 挂在类上的方法
  // 创建 getInstance 静态方法，让外部可以直接点击调用
  static getInstance() {
    if (!this.instance) {
      this.instance = new Demo();
    }
    return this.instance;
  }
}

抽象类

/**
 * 类属性的只读方法：
 * 1. get方法
 * 2. readonly
 */
class Person10 {
  constructor(public readonly name: string) {}
}
const person10 = new Person10("ting");
console.log(person10.name);

/**
 * 抽象类 abstract
 * 很多类的通性，可以用抽象类定义
 * 抽象类里面可以定义有抽象方法，给与确定放回值
 * 抽象类也可以有具体的方法
 *
 */
abstract class Geom {
  abstract higths: number;
  widths: number = -1;
  getType() {
    return "Geom";
  }
  abstract getArea(): number;
}
// 继承抽象类
// 将抽象类的方法和属性实例化。
class Cirtcle extends Geom {
  higths: number = -1;
  getArea(): number {
    return 123;
  }
}

/**
 * 接口 Triangle
 * 接口继承接口extends
 */
interface Person11 {
  name: string;
}
interface Teacher extends Person11 {
  age: number;
}
interface Student extends Person11 {
  class: string;
}
const teacher4 = {
  name: "ting",
  age: 33,
};
const student = {
  name: "zheng",
  class: "一班",
};
// 参数 user: Person11
// Teacher extends Person11
// Student extends Person11
// 所以Teacher Student 类型可以使用
const getUserInfo = (user: Person11) => {
  console.log(user.name);
};
getUserInfo(teacher4);
getUserInfo(student);