TypeScript12：类

一、类

1.类的使用方法

属性：使用属性列表来描述类中的属性。 

属性的初始化检查： 在 tsconfig.json 中配置 "strictPropertyInitialization": true ，可以更加严格的检查属性有没有初始化。

属性的初始化位置：

1. 构造函数中
2. 属性默认值

{
  "compilerOptions": { // 编译选项
    "target":"es2016", // 配置编译木匾代码的版本标准，默认es3
    "module": "commonjs", //配置编译目标使用的模块化标准，默认commonjs
    "lib":["es2016"], // 配置编译器运行的环境，如果需要node环境，需要安装@type/node开发依赖
    "outDir": "./dist", // 配置编译结果目录
    "strictNullChecks":true, // 配置严格模式，开启严格模式
    "strictPropertyInitialization": true // 配置严格模式,更加严格的检查属性有没有初始化
  },
  "include":["./src"] // 配置编译的文件夹
  // "files":["./src/index.ts"] // 配置编译的文件，只编译这个文件和这个文件所依赖的文件
}

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

const u = new User("aa", 2)
console.log(u) // User { name: 'aa', age: 2 }

2.为属性设置默认值

方式一：

class User { 
  name: string;
  age: number;
  gender:"男" | "女" = "男"
  constructor(name: string, age: number) { 
    this.name = name;
    this.age = age;
  }
}

const u = new User("aa", 2)
console.log(u) // User { gender: '男', name: 'aa', age: 2 }

方式二：

class User { 
  name: string;
  age: number;
  gender:"男" | "女"
  constructor(name: string, age: number,gender:"男" | "女" = "男") { 
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
}

const u = new User("aa", 2)
console.log(u) // User { name: 'aa', age: 2, gender: '男' }

3.可选属性

属性可以修饰为可选的，下边代码的 pid 即为可选属性。

class User { 
  name: string;
  age: number;
  pid?: string;
  constructor(name: string, age: number) { 
    this.name = name;
    this.age = age;
  }
}

const u = new User("aa", 2)
console.log(u) // User { name: 'aa', age: 2 }

4.不可更改属性

class User { 
  readonly id: number; // 不能改变
  name: string;
  age: number;
  gender: "男" | "女";
  pid?: string;
  constructor(name: string, age: number, gender: "男" | "女" = "男") { 
    this.id = Math.random();
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
}

const u = new User("aa", 2)
console.log(u) // User { id: 0.1738678697543854, name: 'aa', age: 2, gender: '男' }

5.使用访问修饰符

访问修饰符可以控制类中的某个成员的访问权限。

• public：默认的访问修饰符，公开的，所有的代码均可访问
• private：私有的，只有在类中可以访问
• protected：受保护的

class User { 
  readonly id: number; // 不能改变
  public name: string;
  public age: number;
  public gender: "男" | "女";
  public pid?: string;

  private publicNumber: number = 3; // 每天一共可以发布多少篇文章
  private curNumber: number = 0; // 当前可以发布文章数量

  publish(title:string) { 
    if (this.curNumber >= this.publicNumber) {
      throw new Error("今天已经发布完毕");
    } else { 
      console.log("发布一篇文章：" + title);
      this.curNumber ++;
    }
  }

  constructor(name: string, age: number, gender: "男" | "女" = "男") { 
    this.id = Math.random();
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
}

const u = new User("aa", 2)
u.publish("古希腊掌管JavaScript的神！")
u.publish("古希腊掌管TypeScript的神！")
u.publish("古希腊掌管vue的神！")

// 输出
发布一篇文章：古希腊掌管JavaScript的神！
发布一篇文章：古希腊掌管TypeScript的神！
发布一篇文章：古希腊掌管vue的神！

6.TS语法糖，简写属性 

如果某个属性，通过构造函数的参数传递，并且不做任何处理的赋值给该属性。可以进行简写，在属性前加上任意一个访问修饰符。 

class User { 
  readonly id: number; // 不能改变
  public gender: "男" | "女" = "男";
  public pid?: string;

  constructor(public name: string, public age: number) { 
    this.id = Math.random();
  }
}

const u = new User("aa", 2)
console.log(u); // User { name: 'aa', age: 2, gender: '男', id: 0.2561085238728944 }

二、访问器 

作用：用于控制属性的读取和赋值。类似于 vue 的计算属性。

使用 set 关键字，设置属性值，使用 get 关键字，读取属性值。如果想要属性只读可以单独使用 get 关键字。

class User {
  readonly id: number; // 不能改变
  public gender: "男" | "女" = "男";
  public pid?: string;

  // 设置器
  set age(value: number) {
    if (value < 0) {
      this._age = 0;
    } else if (value > 200) {
      this._age = 200;
    } else { 
      this._age = value;
    }
  }
  get age() {
    return this._age;
  }
  // 读取器
  constructor(public name: string, private _age: number) {
    this.id = Math.random();
  }
}

const u = new User("aa", 2)
u.age = 100
console.log(u.age); // 100