typescript 学习笔记

1. 简单创建一个class 类

class Person {
  // name:string;
  // constructor(name:string){
  //   this.name = name
  // }
  // 简化写法 在构造器的参数前面加上 访问属性，就是默认添加一个参数名的属性，并在构造器中进行赋值
  constructor(public name : string){}
  age: number = 18;
}

2. class 的 访问属性： public , protected , private

public 共有的。 类的内外都可以使用。

protected 受保护的。 类的内部使用，继承的子类中使用。

private 私有的。 类的内部使用。

类有2个特征： 封装、继承

类的封装： 用public private 实现。 public可以被用户代码（类外）访问。private只能被类成员（类内）访问 和 友元 访问

类的继承： protected左右就是实现继承。 protected可以被派生类对象访问。用户代码（类外）不可以访问。

class Person {
  // name: string = 'abby';
  public name = 'abby';
  private age = 18;
  getAge(){
    return this.age // age 是私有属性 private，只能类成员访问。 不能类外访问
  };
  protected hair = 'black'; // hair 是受保护的方法 protected，只能类成员，及 派生类中访问
  protected sayHi(){
    console.log('hello!'); // sayHi 是受保护的方法 protected，只能类成员，及 派生类中访问
  }
}

class Teacher extends Person {
  getHair(){
    return this.hair
  }
}
const p = new Person()
console.log(p.name);
// console.log(p.age);  // age 是私有属性 private，只能类成员访问
// p.sayHi() // sayHi 是受保护的方法，只能类成员，及 继承的子类中访问
const t = new Teacher()
console.log(t.getHair()) // getHair方法中调用的hair，是父类中的protected属性，可以在继承的子类中访问

3. class 类的构造器

用new 来创建对象的时候，就会调用class类中的constructor构造函数，从而进行一系列操作。

class Person {
  constructor(public name : string){}
}

const p = new Person('abby') // 在Person 实例化的时候，就会进行执行 constructor函数

class Person {
  // name:string;
  // constructor(name:string){
  //   this.name = name
  // }
  // 简化写法 在构造器的参数前面加上 访问属性，就是默认添加一个参数名的属性，并在构造器中进行赋值
  constructor(public name : string){}
}

派生类的 constructor 必须显式定义。

跟 C#、Java 等语言会默认创建调用父类构造逻辑的 constructor 不一样。

ES6 的 Class 要求派生类明确写上 constructor 并在其中调用 super 函数以确保父类构造逻辑运行。

class Person {
  constructor(public name : string){}
}

const p = new Person('abby') // 在Person 实例化的时候，就会进行执行 constructor函数

class Teacher extends Person {
  age: 18;
  constructor(_name:string){
    super(_name) // 子类的构造器中，要用super关键字先作为函数调用一下，之后就可以使用 this关键字 。
  }
}

const t = new Teacher('dell')

4. 类的继承。 ES6 的 Class 要求如果父类有constructor，派生类必须明确写上 constructor 并在其中调用 super 函数以确保父类构造逻辑运行，

es6规定在子类中使用this之前必须先执行一次super函数，super相当于Father.prototype.constructor.call(this)

class Father{
  a = 2;
  constructor(){
    this.a = 1
  }
}
class Son extends Father {
  constructor(){
    super() // 在子类的构造器中使用
  }
}

5. 类的取值函数getter、存值函数setter。

一般是配合private私有属性，进行类外的存值取值

// class 类 的 1.取值函数getter、2.寸值函数setter。 一般是配合private私有属性，进行类外的存值取值

class User {
  private _name: string;
  constructor(name: string){
    this._name = name
  };
  get name(){
    return this._name
  };
  set name(name){
    this._name = name
  }
}
const u = new User('Tom')
console.log(u.name);
u.name = 'Lily'
console.log(u.name);
console.log('------------------');


class Person {
  constructor(private _name: string){}
  get name(){
    return this._name
  }
  set name(name: string){
    this._name = name
  }
}

const p = new Person('delly')
// p._name // _name 是私有属性，不对外暴露。 
// 若想在类外进行操作私有属性_name，可以通过setter、getter
console.log(p.name);
p.name = 'Abby'
console.log(p.name);

// 1. 创建一个——Person类。
// 2. 通过构造函数 定义 私有属性 _name
// 3. 通过取值函数、存值函数 对 私有属性_name 进行相关操作，这些操作通常是用来保护类的私有属性。
// 4. 这样用户代码（类外）就可以使用

6. 类的静态方法static

class 类，一般成员属性，有3种访问属性， public（共有的）、private（私有的）、protected（受保护的）。这些属性，都是挂载在类的实例上的。  =>  实例方法

class 类，static 静态属性 ，在成员方法前 加上 static关键字， 这个方法， 是直接挂载在类上的，而非实例上。

es6中， 只有静态方法，而没有静态属性。 es7中，支持静态属性、静态方法。

父类的静态方法，可以被子类继承、重写 （es6）

子类可以通过 super来访问父类的静态方法 （es6）

typescript 支持静态方法、静态属性

// static 静态属性

class Person {
  constructor(public name: string){}
  static classMethod(){
    return 'Person Name'
  };
  static getSex(){
    return ['male','female']
  };
}
console.log(Person.getSex())

// 
class User extends Person{
  static classMethod(){
    return super.classMethod() + ': User Name'
  }
}
console.log(Person.classMethod())
console.log(User.classMethod())

7. 抽象类 abstract class 

　　1.供其他类继承的基类。

　　2.抽象类不允许实例化。

　　3. 抽象类中的抽象方法，必须在子类中实现。

// 比如： 有多个类：Circle、Square、Triangle等图形类，这些类都有一些通用的属性、方法。那就可以把这些通用的属性、方法，抽出来，新建一个抽象类

abstract class Geom{
  borderWeight:number;
  borderColor: string;
  getType(){
    return 'GEOM'
  };
  // getArea(){}; // 多个图形类通用的方法， 但是每种图形计算面积的具体操作是不同的 =>  抽象出 抽象方法
  abstract getArea(): number; // 在抽象类的抽象方法，只能定义抽象类，而不能实现这个抽象方法，这个具体的抽象方法只能在子类中进行实现。
}

class Circle extends Geom{
  // borderWeight:number; // 多个图形类通用的属性
  // getType(){return 'GEOM'}; // 多个图形类通用的方法，可以抽到抽象类中
  // getArea(){}; // 多个图形类通用的方法，可以抽到抽象类中
  radiusLength: number = 10;
  getArea(){
    return 1000
  }
}
class Square extends Geom{
  // borderWeight:number; // 多个图形类通用的属性  
  // getType(){return 'GEOM'}; // 多个图形类通用的方法，可以抽到抽象类中
  // getArea(){}; // 多个图形类通用的方法
   number = 10;
  height: number = 10
  getArea(){
    return 2000
  }
}
class Triangle {
  // borderWeight:number; // 多个图形类通用的属性
  // getType(){return 'GEOM'}; // 多个图形类通用的方法，可以抽到抽象类中
  // getArea(){}; // 多个图形类通用的方法
  angle: number = 90;
  getArea(){
    return 3000
  }
}
const c = new Circle()
c.borderWeight = 20
c.radiusLength = 200
console.log(c);

const s = new Square()
s.width = 20
s.getArea()
console.log(s.getArea());
console.log(s);