TypeScript面向对象-接口拓展-枚举-索引签名等

TypeScript
, , ,

在 TypeScript 中使用类

在 ES6 之前，我们要想在 JavaScript 使用类，需要通过函数和原型链来实现类和继承。但在 ES6 之后，引入了 class 关键字，可以更加方便定义和使用类。

但在实际开发 JavaScript 中，随着框架的升级迭代。类开发方式，逐渐被函数式开发所替代。如 React 16 的 Hooks，Vue3 中的 Composition API 都标志着函数式编程正在成为主流的编写 JavaScript 的方式。

话虽这么说，但是在封装某些业务的时候，类具有更强大的封装性，所以也要掌握它。

基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
class Person {
    // 成员属性，声明成员属性
    name: string
    age = 18 // 可以给默认值，TypeScript 会根据类型推导推导出它的类型

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

}

const p1 = new Person('pixelpilot', 28)

类的继承

面向对象其中一大特性就是继承。继承可以减少我们的代码量。

使用 extends 关键字来实现继承，子中调用 super 来访问父类。

类的成员修饰符

在 TypeScript 中，类的属性和方法支持三种修饰符：public、private、protected

  • public 修饰是在任何地方可见、公有的属性或方法，默认编写的属性就是 public。
  • private 修饰符是仅在同一类中可见、私有属性或方法
  • protected 修饰的是仅在自身及类中可见、受保护的属性或方法。

参数属性

TypeScript 提供了特殊的语法，可以把一个构造函数转成一个同名值的属性。

  • 这些就被称之为参数属性
  • 可以通过构造函数参数前添加一个可见性修饰符来创建参数属性，最后这些属性字段也会得到这些修饰符

鸭子类型

在 TypeScript 中，你可能会遇到一些不符合常理的事情。如传递一个元组类型的参数，到一个数组类型的函数里。竟然不会报错。这离不开 TypeScript 是一种鸭子类型。

当我看到一只鸟，它走路像鸭子、游泳像鸭子、叫声像鸭子，我就称其为鸭子。

也就是说 TypeScript 不在乎你传递过来的是什么类型。只要它符合我的规定。那么它就是合法的。

索引签名

索引签名（Index Signature）允许我们定义对象可以用任意的属性名和属性值类型。它主要用于定义具有动态属性名的对象，或在需要处理属性名和数量不确定的对象时非常有用。

格式

1
[index: number]: string

接口中的继承

在 TypeScript 中，接口可以通过 extends 关键字进行继承过来属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
interface IPerson {
	name: string;
	age: number;
}

interface Ikun extends IPerson {
	slogon: string;
}

const Ikun1: Ikun = {
	name: "小黑子",
	age: 18,
	slogon: "你干嘛",
};
  • 减少我们书写相同类型的代码
  • 给第三方库自定义一些属性，自定义一个接口并拥有第三库某个类型中的所有属性。

接口类实现

接口类实现可以使用 implements 关键字。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
interface IPerson {
	name: string;
	age: number;
}

interface Ikun extends IPerson {
	slogon: string;

	playBasketball: () => void;
}


class Person implements Ikun {
	name:'小黑子'
	age: 22
	slogon: '你干嘛，哎呦';
	playBasketball() {
		console.log('我会唱、跳、rap、打篮球');
	}
}

const p1 = new Person()

console.log(p1.age);

p1.playBasketball()
  • 一个类还可以实现多个接口

严格字面量检测

严格字面量检测是 TypeScript 中一种特别奇怪的现象。当我们第一次声明并赋值的时候，严格字面量检测就会生效。如果有违法行为，TypeScript 就会报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface IPerson {
	name: string;
	age: number;
}

const MyInfo = {
	name: "pixelpilot",
	age: 18,
	height: 1.88,
};

function printPerson(person: IPerson) {}

printPerson(MyInfo); // 不报错，再次使用就不新鲜了。
printPerson({ name: "pixelpilot", age: 18, heigth: 1.88 }); // 严格字面量检测生效，报错。在类型定义中没有 height 属性，所以传递过去会报错。
  • 新鲜定义的字面量，就会被严格检测。

TypeScript 枚举类型

枚举是 TypeScript 中为数不的特性之一。在 JavaScript 中根本有枚举这种类型。

  • 枚举就是将一组可能出现的值，一个个列举出来，定义在一个类型中，这个类型就是枚举。
  • 枚举允许开发者定义一组命名常量，常量可以是数字、字符串类型。
1
2
3
4
5
6
7
8
9
// 定义枚举类型
enum Direction {
	UP,
	DOWN,
	LEFT,
	RIGHT,
}

const d1: Direction = Direction.UP;