TypeSript7 class类

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用ES6的“类”改写，就是下面这样。

//定义类
class Person {
    constructor () {
 
    }
    run () {
        
    }
}

在ts中如何定义class类 

在TypeScript是不允许直接在constructor 定义变量的 需要在constructor上面先声明

你如果了定义了变量不用 也会报错 通常是给个默认值 或者 进行赋值

class Person {

  name: string;

  age: number;

  sex:number = 0 //默认值

  constructor(name: string, age: number) {

    this.name = name

    this.age = age

  }

  run() {

   

  }

}

类的修饰符 public private protected

总共有三个 public private protected

使用public 修饰符 可以让你定义的变量 内部访问 也可以外部访问 如果不写默认就是public

使用  private 修饰符 代表定义的变量私有的只能在内部访问 不能在外部访问

class Person {

  public name: string;

  private age: number;

  protected sex: number = 0; //默认值

  constructor(name: string, age: number) {

    this.name = name;

    this.age = age;

  }

  run() {}

}

const peo = new Person('xx',23)

console.log(peo.name)

  使用  protected 修饰符 代表定义的变量私有的只能在内部和继承的子类中访问 不能在外部访问

class Person {

  public name:string

  private age:number

  protected some:any

  constructor (name:string,ages:number,some:any) {

     this.name = name

     this.age = ages

     this.some = some

  }

  run () {

  }

}

class Man extends Person{

  constructor () {

      super("张三",18,1)

      console.log(this.some)

  }

  create () {

     console.log(this.some)

  }

}

let xiaoman = new Person('小满',18,1)

let man = new Man()

man.some //报错

 static 静态属性 和 静态方法

我们用static 定义的属性 不可以通过this 去访问 只能通过类名去调用

static 静态函数 同样也是不能通过this 去调用 也是通过类名去调用

需注意： 如果两个函数都是static 静态的是可以通过this互相调用

class Person {
  static xxx: string = "66";
  private age: number;
  constructor(ages: number) {
    this.age = ages;
    // this.xxx //静态属性无法用this调用
  }
  run() {
    console.log(Person.xxx);
    // this.test1  //static 静态函数 同样也是不能通过this 去调用 也是通过类名去调用
  }
  static test1() {
    return "aaa";
  }
  static test2() {
    console.log(Person.test1());
  }
}
console.log(Person.xxx);
Person.test2();

interface 定义 类

 
interface PersonClass {
    get(type: boolean): boolean
}
 
interface PersonClass2{
    set():void,
    asd:string
}
 
class A {
    name: string
    constructor() {
        this.name = "123"
    }
}
 
class Person extends A implements PersonClass,PersonClass2 {
    asd: string
    constructor() {
        super()
        this.asd = '123'
    }
    get(type:boolean) {
        return type
    }
    set () {
 
    }
}

抽象类 

应用场景如果你写的类实例化之后毫无用处此时我可以把他定义为抽象类

或者你也可以把他作为一个基类-> 通过继承一个派生类去实现基类的一些方法

我们看例子

下面这段代码会报错抽象类无法被实例化

abstract class A {
   public name:string
   
}
 
new A()

例子2

我们在A类定义了 getName 抽象方法但为实现

我们B类实现了A定义的抽象方法 如不实现就不报错 我们定义的抽象方法必须在派生类实现

// abstract定义的抽象类ref是不能实例化的

abstract class Ref {

  name: string;

  constructor(name?: string) {

    // 实例化的时候可不传name值

    this.name = name;

  }

  getName(): string {

    return this.name;

  }

  abstract init(name: string): void;

}

// 派生类

class React extends Ref {

  constructor() {

    super();

  }

  init(name: string) {}

  setName(name: string) {

    this.name = name;

  }

}

const react = new React();

react.setName("xxx");

console.log(react.getName());

 虚拟dom ts版本

// implements使用
interface Options {
  el: string | HTMLElement;
}

interface VueCls {
  options: Options;
  init: () => void;
}

interface Vnode {
  tag: string; //div header
  text?: string; // 123可选
  children?: Vnode[];
}
// 虚拟Dom简单版
class Dom {
  createEl(el: string) {
    return document.createElement(el);
  }
  // 填充文本
  setText(el: HTMLElement, text: string | null) {
    el.textContent = text;
  }
  //
  render(data: Vnode) {
    let root = this.createEl(data.tag);
    if (data.children && Array.isArray(data.children)) {
      data.children.forEach((item) => {
        let child = this.render(item); //递归 不确定children有多少层
        root.appendChild(child);
      });
    } else {
      this.setText(root, data.text);
    }
    return root;
  }
}
// Vue extends Dom vue是子类继承了父类Dom 需super()
class Vue extends Dom implements VueCls {
  options: Options;
  constructor(options: Options) {
    super(); //放在最上面
    this.options = options;
    this.init();
  }
  init(): void {
    // 虚拟Dom 通过js渲染真实的Dom
    let data: Vnode = {
      tag: "div",
      children: [
        {
          tag: "section",
          text: "子节点1",
        },
        {
          tag: "section",
          text: "子节点2",
        },
      ],
    };
    let app =
      typeof this.options.el == "string"
        ? document.querySelector(this.options.el)
        : this.options.el;
    app.appendChild(this.render(data)); // 子类调用父类的方法
  }
}

new Vue({
  el: "#app",
});

 TypeSript8 泛型学习-CSDN博客