【TypeScript 4.5】008-第 8 章 类

一、类成员

1.引言

TypeScript提供了对2015中的引入class关键字支持，跟其他的javascript语言的功能是一样的，TypeScript增加了类型注视和其他语法，允许我们表达类型之间的关系

2.类成员分类

类属性、readonly、构造器、方法、Getters/Setters、索引签名

二、类属性 

  类使用class关键字类定义；注意：类名首字母要大写，后面不用加等于号，跟接口定义方式一致

在类上声明一个字段，创建一个公共的可写属性 

代码示例

class Point{
// 属性“x”没有初始化表达式，且未在构造函数中明确赋值。
	x: number
	y: number
}

// 实例化
const pt = new Point()
// 访问和赋值
pt.x = 10
pt.y = 10

在tsconfig.json文件中设置 "strictPropertyInitialization": false,   不会检测类的属性

   赋值初始化值

class Point{
	x: number = 0
	y: number = 0
}

 代码演示

另一种初始化方式，使用构造函数的方法

class Point{
	x: number 
	y: number 
	constructor(){
		this.x = 0
		this.y = 0
	}
}

进行初始化时再去确定是什么类型 

class Point{
	x
	y
	constructor(){
		this.x = 0
		this.y = 0  //自动推断为number类型
	}
}

 其外知识点，假设引用第三方的类，没法控制初始化得劲过程可以使用！符号

class OKGreeter {
	name!: string
}

三、readonly修饰符 

1、概述 

 在一个字段前面加上这个前缀，可以防止我们在构造函数之外对这个字段进行复制

代码示例

class Ponit {
   readonly name: string = 'world'
}

 代码演示

class Greeter {
	readonly name: string = 'hello'
	constructor() {
		this.name = 'world'
	}
	err(){
		// 在类里面的函数也是不能修改的
		// this.name = 'a'无法为“name”赋值，因为它是只读属性。
	}
}

const g = new  Greeter()
g.name = 'a'// 无法为“name”赋值，因为它是只读属性。

两种初始化的区别 constructor是用户来初始化 上面是定义类的时候初始化

class Greeter {
	readonly name: string = 'hello'
    constructor (param:string){
		this.name = param
	} 
}

const gg = new Greeter('wold')
console.log(gg.name); // world

 实例化时不传入参数

class Greeter {
	readonly name: string = 'hello'
	constructor (param?:string){
		//不能将类型“string | undefined”分配给类型“string”。
		// this.name = param
		if(param !== undefined){
			this.name = param
		}
	}
const gg1 = new Greeter()// 应有 1 个参数，但获得 0 个。

 四、构造器

构造器指的是constructor构造函数

 代码示例

class Point {
  x: number;
  y: number;
 
  // 带默认值的正常签名
  constructor(x: number = 0, y:number = 0) {
    this.x = x;
    this.y = y;
  }
}

 代码演示

class Point {
  x: number;
  y: number;
 
  // 带默认值的正常签名
  constructor(x: number, y:number) {
    this.x = x;
    this.y = y;
  }
}

const p = new Point();//应有 2 个参数，但获得 0 个。
console.log(p.x,p.y);


// 构造函数读取this的时候，如果这个类是另外一个类派生出来的使用super关键字

class Base {
	k = 4
}

class Derived extends Base {
	// constructor(){} 派生类的构造函数必须包含 "super" 调用。\
	constructor() {
		super();
		console.log(this.k);
		
	}
}

五、方法

一个类上函数属性被称为方法，可以使用函数和构造函数相同的类型注释(n:number)

代码示例

class Point {
  x = 10;
  y = 10;
 
  scale(n: number): void {
    this.x *= n;
    this.y *= n;
  }
}

 代码演示

class PoainMethods {
	x : number = 10
	y : number = 20

	// (params: number): void 这个就被称为类型注释
	scale(params: number): void{
		this.x *= params;
		this.y *= params;
	}
}

const p = new PoainMethods()
p.scale(2)
console.log(p.x, p.y)

注意：在方法体里必须通过this来访问字段和其他的方法，但是有一些变量可能他的作用域有些改变

let x: number = 111
class C {
	x: string = 'hello'
	say(){
		x =100 // 这个x读取是外边的x，而不是类内部的x
	}
}

 六、Getters/Setters

 概述

getters和setters是我们类里面特殊的一些方法，我们称为访问器/存取器（设置器）

代码示例

class C {
  _length = 0;
  get length() {
    return this._length;
  }
  set length(value) {
    this._length = value;
  }
}

代码演示

class B {
	_length = 0
	get length() {
		return this._length
	}

	set length(value){
		 this._length = value
	}
}

let b: B = new B()
// b.length()此表达式是 "get" 访问器，因此不可调用