【笔记】TS的面向对象

发表于 分类于 阅读次数：

前言

TS的面向对象学习笔记

类

定义类

1
2
3
4
5
6
7
class 类名 {
  属性名: 数据类型;

  方法名(形参名: 数据类型): 返回值类型 {
    ...
  }
}

可选的属性

  • 通过?定义可选的属性
1
2
3
class 类名 {
  属性名?: 数据类型;
}

只读的属性

  • 通过权限修饰符readonly定义只读的属性
1
2
3
class 类名 {
  readonly 属性名: 数据类型;
}

创建对象

1
let 变量名: 类名 = new 类名();

权限修饰符

关键字 权限 类内是否可以访问成员 类外是否可以访问成员变量 是否可以被继承
public 缺省值，公共权限 ✓ ✓ ✓
protected 保护权限 ✓ × ✓
private 私有权限 ✓ × × 
1
2
3
4
5
class 类名 {
  public 属性名1: 数据类型;
  protected 属性名2: 数据类型;
  private 属性名3: 数据类型;
}

构造方法

1
2
3
4
5
6
7
class 类名 {
  private _属性名: 数据类型;

  constructor(属性名: 数据类型) {
    this._属性名 = 属性名;
  }
}

参数属性

  • 参数属性是一种语法糖，如果为构造方法的形参添加任意修饰符，那么可以省略属性的定义与初始化
1
2
3
class 类名 {
  constructor(private 属性名: 数据类型) {}
}

Getter和Setter方法

1
2
3
4
5
6
7
8
9
10
11
class 类名 {
  private _属性名: 数据类型;

  set 属性名(形参名: 数据类型) {
    this._属性名 = 形参名;
  }

  get 属性名(): 数据类型 {
    return this._属性名;
  }
}

类的继承

1
2
3
class 类名 extends 父类名 {
  ...
}

类实现接口

1
2
3
class 类名 implements 接口名 {
  ...
}
1
2
3
class 类名 implements 接口名1, 接口名2 {
  ...
}

抽象类

1
2
3
abstract class 抽象类名 {
  abstract 抽象方法名();
}

接口

定义接口

1
2
3
interface 接口名 {
  属性名: 数据类型;
}

可选的属性

  • 通过?定义可选的属性
1
2
3
interface 接口名 {
  属性名?: 数据类型;
}

补充接口的定义

  • 通过同名接口补充接口的定义
1
2
3
4
5
6
7
interface 接口名 {
  属性名1: 数据类型;
}

interface 接口名 {
  属性名2: 数据类型;
}

使用接口作为变量数据类型

1
let 变量名: 接口名;
  • 通过交叉类型使用多个接口作为变量数据类型
1
let 变量名: 接口名1 & 接口名2;

接口的继承

1
2
3
interface 接口名 extends 父接口名 {
  ...
}

函数的调用签名

  • 定义一个变量本身是一个可以调用的函数

声明

1
2
3
interface 接口名 {
  (形参名: 形参数据类型): 返回值类型;
}

定义

1
2
3
let 变量名: 接口名 = function (形参名: 形参数据类型): 返回值类型 {
  return 返回值;
}

调用

1
console.log(变量名(实参值)); // 返回值

构造函数调用签名

  • 定义一个变量本身是一个可以new的构造函数

声明

1
2
3
interface 接口名 {
  new (形参名: 形参数据类型): 返回值类型;
}

定义

1
2
3
let 变量名: 接口名 = function (形参名: 形参数据类型): 对象类型 {
  return 对象;
} as unknown as 接口名;

调用

1
console.log(new 变量名(实参值)); // 对象

索引签名

  • 定义一个变量本身是可以通过[]取值的可迭代对象

声明

索引数据类型：只能是number或string

1
2
3
interface 接口名 {
  [索引名: 索引数据类型]: 索引返回值类型;
}
  • 如果除了声明索引数据类型的属性之外还声明了其他属性，且这个索引数据类型是string类型，则其他的属性的返回值类型必须是索引数据类型的属性的返回值类型的同集或子集
1
2
3
4
interface 接口名 {
  [索引名: string]: any;
  key: string;
}
  • 如果同时声明2个索引数据类型的属性，索引数据类型number的返回值类型必须是索引数据类型string的返回值类型的同集或子集
    • 原因是通过索引获取数据时，变量名[0]实质上会被JS转换为变量名["0"]
1
2
3
4
interface 接口名 {
  [索引名: 索引数据类型1]: 索引返回值类型;
  [索引名: 索引数据类型2]: 索引返回值类型;
}

定义

1
let 变量名: 接口名 = [值, 值]
1
let 变量名: 接口名 = { 属性名1: 值, 属性名2: 值 }

调用

  • 如果索引数据类型为number，则索引名为数字，否则索引名为属性名
1
console.log(变量名[索引名]);

完成