微信图片_20210324203626.jpg

Ts 是为了在 JS 中添加编译时类型检查而创建的 类型:对数据做的一种分类,定义了能够对数据执行的操作、数据的意义,以及允许数据接受的值的集合。

  • 正确性
  • 不可变性
  • 封装
  • 可组合性
  • 可读性

    组合

    ```typescript // 利用泛型实现可组合的系统 function first(range: T[], p: (elem: T) => boolean): T | undefined { for (let elem of range) {
    1. if (p(elem)) return elem;
    } }

function findFirstNegativeNumber(numbers: number[]): number | undefined { return first(numbers, n => n < 0); }

function findFirstOneCharacterString(strings: string[]): string | undefined { return first(strings, str => str.length == 1); }

  1. <a name="BMgeb"></a>
  2. # 实施约束
  3. <a name="UX4tG"></a>
  4. ## 构造函数
  5. ```typescript
  6. declare const celsiusType: unique symbol;
  7. class Celsius {
  8. readonly value: number;
  9. [celsiusType]: void;
  10. constructor(value: number) {
  11. // if (value < -273.15) throw new Error();
  12. if (value < -273.15) value = -273.15;
  13. this.value = value;
  14. }
  15. }

工厂函数

创建另一个对象的类或函数

  1. declare const celsiusType: unique symbol;
  2. class Celsius {
  3. readonly value: number;
  4. [celsiusType]: void;
  5. // Changing the scope of a constructor to private removes our ability to use the new keyword.
  6. // 即外部不能使用 new Celsius,通过工厂函数就能控制最终的构造对象
  7. private constructor(value: number) {
  8. this.value = value;
  9. }
  10. static makeCelsius(value: number): Celsius | undefined {
  11. if (value < -273.15) return undefined;
  12. return new Celsius(value);
  13. }
  14. }
  • 策略模式

    允许在运行时从一组算法中选择某个算法,把算法与使用算法的组件解耦。

微信截图_20210328111354.png
伪代码:

  1. // 策略接口声明了某个算法各个不同版本间所共有的操作。上下文会使用该接口来
  2. // 调用有具体策略定义的算法。
  3. interface Strategy is
  4. method execute(a, b)
  5. // 具体策略会在遵循策略基础接口的情况下实现算法。该接口实现了它们在上下文
  6. // 中的互换性。
  7. class ConcreteStrategyAdd implements Strategy is
  8. method execute(a, b) is
  9. return a + b
  10. class ConcreteStrategySubtract implements Strategy is
  11. method execute(a, b) is
  12. return a - b
  13. class ConcreteStrategyMultiply implements Strategy is
  14. method execute(a, b) is
  15. return a * b
  16. // 上下文定义了客户端关注的接口。
  17. class Context is
  18. // 上下文会维护指向某个策略对象的引用。上下文不知晓策略的具体类。上下
  19. // 文必须通过策略接口来与所有策略进行交互。
  20. private strategy: Strategy
  21. // 上下文通常会通过构造函数来接收策略对象,同时还提供设置器以便在运行
  22. // 时切换策略。
  23. method setStrategy(Strategy strategy) is
  24. this.strategy = strategy
  25. // 上下文会将一些工作委派给策略对象,而不是自行实现不同版本的算法。
  26. method executeStrategy(int a, int b) is
  27. return strategy.execute(a, b)
  28. // 客户端代码会选择具体策略并将其传递给上下文。客户端必须知晓策略之间的差
  29. // 异,才能做出正确的选择。
  30. class ExampleApplication is
  31. method main() is
  32. 创建上下文对象。
  33. 读取第一个数。
  34. 读取最后一个数。
  35. 从用户输入中读取期望进行的行为。
  36. if (action == addition) then
  37. context.setStrategy(new ConcreteStrategyAdd())
  38. if (action == subtraction) then
  39. context.setStrategy(new ConcreteStrategySubtract())
  40. if (action == multiplication) then
  41. context.setStrategy(new ConcreteStrategyMultiply())
  42. result = context.executeStrategy(First number, Second number)
  43. 打印结果。

使用接口和类实现

  1. class Car {
  2. // represents a car
  3. }
  4. // 策略模式的接口
  5. interface IWashingStrategy {
  6. wash(car: Car): void;
  7. }
  8. // 策略的具体实现
  9. class StandardWash implements IWashingStrategy {
  10. wash(car: Car): void {
  11. // ...
  12. }
  13. }
  14. class PremiumWash implements IWashingStrategy {
  15. wash(car: Car): void {
  16. //...
  17. }
  18. }
  19. // 根据需要选择相应的策略
  20. class CarWash {
  21. service(car: Car, premium: boolean) {
  22. let washingStrategy: IWashingStrategy;
  23. if (premium) {
  24. washingStrategy = new PremiumWash();
  25. } else {
  26. washingStrategy = new StandardWash();
  27. }
  28. washingStrategy.wash(car);
  29. }
  30. }

使用函数实现

  1. class Car {
  2. // represents a car
  3. }
  4. // 定义策略函数的类型
  5. type WashingStrategy = (car: Car) => void;
  6. // 策略的具体实现, 一个函数就是一个策略
  7. function standardWash(car: Car): void {
  8. //...
  9. }
  10. function premiumWash(car: Car): void {
  11. //...
  12. }
  13. // 根据需要选择相应的策略
  14. class CarWash {
  15. service(car: Car, premium: boolean) {
  16. let washingStrategy: WashingStrategy;
  17. if (premium) {
  18. washingStrategy = premiumWash;
  19. } else {
  20. washingStrategy = standardWash;
  21. }
  22. washingStrategy(car);
  23. }
  24. }

函数类型或签名:

函数的实参类型和返回类型决定了函数的类型。 相同的实参 + 相同的返回类型 = 相同的类型 实参集合加上返回类型也称为函数的签名。

状态模式

可以在一个对象的内部状态变化时改变其行为,使其就像改变了自身所属的类一样

有限状态机

微信截图_20210328120806.png

主要思想是程序在任意时刻仅可处于几种有限的状态中。 在任何一个特定状态中, 程序的行为都不相同, 且可瞬间从一个状态切换到另一个状态。 不过, 根据当前状态, 程序可能会切换到另外一种状态, 也可能会保持当前状态不变。 这些数量有限且预先定义的状态切换规则被称为转移。

有限状态机的特征:

  1. 有限的状态
  2. 有限的事件
  3. 一个初始状态
  4. 变换器(给定当前状态 + 事件,可以得出下个状态)
  5. 若干个(或无)的最终状态 ```typescript // 状态机用一个枚举表示 enum TextProcessingMode { Text, Marker, Code, }

class TextProcessor { private mode: TextProcessingMode = TextProcessingMode.Text; private result: string[] = []; private codeSample: string[] = [];

  1. processText(lines: string[]): string[] {
  2. this.result = [];
  3. this.mode = TextProcessingMode.Text;
  4. for (let line of lines) {
  5. this.processLine(line);
  6. }
  7. return this.result;
  8. }
  9. private processLine(line: string): void {
  10. switch (this.mode) {
  11. case TextProcessingMode.Text:
  12. this.processTextLine(line);
  13. break;
  14. case TextProcessingMode.Marker:
  15. this.processMarkerLine(line);
  16. break;
  17. case TextProcessingMode.Code:
  18. this.processCodeLine(line);
  19. break;
  20. }
  21. }
  22. private processTextLine(line: string): void {
  23. this.result.push(line);
  24. if (line.startsWith("<!--")) {
  25. this.mode = TextProcessingMode.Marker;
  26. }
  27. }
  28. private processMarkerLine(line: string): void {
  29. this.result.push(line);
  30. if (line.startsWith("```ts")) {
  31. this.result = this.result.concat(this.codeSample);
  32. this.mode = TextProcessingMode.Code;
  33. }
  34. }
  35. private processCodeLine(line: string): void {
  36. if (line.startsWith("```")) {
  37. this.result.push(line);
  38. this.mode = TextProcessingMode.Text;
  39. }
  40. }

}

  1. 状态由函数表示的实现:
  2. ```typescript
  3. class TextProcessor {
  4. private result: string[] = [];
  5. // 状态控制有函数表示
  6. private processLine: (line: string) => void = this.processTextLine;
  7. private codeSample: string[] = [];
  8. processText(lines: string[]): string[] {
  9. this.result = [];
  10. this.processLine = this.processTextLine;
  11. for (let line of lines) {
  12. this.processLine(line);
  13. }
  14. return this.result;
  15. }
  16. private processTextLine(line: string): void {
  17. this.result.push(line);
  18. if (line.startsWith("<!--")) {
  19. this.processLine = this.processMarkerLine;
  20. }
  21. }
  22. private processMarkerLine(line: string): void {
  23. this.result.push(line);
  24. if (line.startsWith("```ts")) {
  25. this.result = this.result.concat(this.codeSample);
  26. this.processLine = this.processCodeLine;
  27. }
  28. }
  29. private processCodeLine(line: string): void {
  30. if (line.startsWith("```")) {
  31. this.result.push(line);
  32. this.processLine = this.processTextLine;
  33. }
  34. }
  35. }

延迟计算

传递函数而不是实际的值,在需要值的时候再调用这些函数,这样可以避免高开销的计算

  1. class Bike {}
  2. class Car {}
  3. function chooseMyRide(bike: Bike, car: () => Car): Bike | Car {
  4. if (isItRaining()) {
  5. return car();
  6. } else {
  7. return bike;
  8. }
  9. }
  10. function makeCar(): Car {
  11. return new Car();
  12. }
  13. chooseMyRide(new Bike(), makeCar);

装饰器模式

允许你通过将对象放入包含行为的特殊封装对象中来为原对象绑定新的行为

微信截图_20210331201052.png

  1. class Widget {}
  2. interface IWidgetFactory {
  3. makeWidget(): Widget;
  4. }
  5. class WidgetFactory implements IWidgetFactory {
  6. public makeWidget(): Widget {
  7. return new Widget();
  8. }
  9. }
  10. // SingletonDecorator 封装 IWidgetFactory
  11. // 通过单例复用同一个实例
  12. class SingletonDecorator implements IWidgetFactory {
  13. private factory: IWidgetFactory;
  14. private instance: Widget | undefined = undefined;
  15. constructor(factory: IWidgetFactory) {
  16. this.factory = factory;
  17. }
  18. public makeWidget(): Widget {
  19. if (this.instance == undefined) {
  20. this.instance = this.factory.makeWidget();
  21. }
  22. return this.instance;
  23. }
  24. }

函数装饰器

  1. class Widget {}
  2. type WidgetFactory = () => Widget;
  3. function makeWidget(): Widget {
  4. return new Widget();
  5. }
  6. function singletonDecorator(factory: WidgetFactory): WidgetFactory {
  7. let instance: Widget | undefined = undefined;
  8. return (): Widget => {
  9. if (instance == undefined) {
  10. instance = factory();
  11. }
  12. return instance;
  13. }
  14. }
  15. function use10Widgets(factory: WidgetFactory) {
  16. for (let i = 0; i < 10; i++) {
  17. let wiget = factory();
  18. }
  19. }
  20. // 因为 singletonDecorator() 返回一个 widgetFactory,
  21. // 所以可以将其作为实参传递给 use10Widgets()
  22. use10Widgets(singletonDecorator(makeWidget));

子类型

  • unique symbol的使用

    To enable treating symbols as unique literals a new type unique symbol is available. unique symbol is are subtype of symbol, and are produced only from calling Symbol() or Symbol.for(), or from explicit type annotations. The new type is only allowed on const declarations and readonly static properties, and in order to reference a specific unique symbol, you’ll have to use the typeof operator. Each reference to a unique symbol implies a completely unique identity that’s tied to a given declaration.

  1. // Works
  2. declare const Foo: unique symbol;
  3. // Error! 'Bar' isn't a constant.
  4. let Bar: unique symbol = Symbol();
  5. // Works - refers to a unique symbol, but its identity is tied to 'Foo'.
  6. let Baz: typeof Foo = Foo;
  7. // Also works.
  8. class C {
  9. static readonly StaticSymbol: unique symbol = Symbol();
  10. }

通过在属性定义中使用 unique symbol,使得各个类之间可以区分类型,不能互为子类型

子类型:如果在期待类型 T 的实例的任何地方,都可以安全地使用类型 S 的实例,那么称类型 S 是类型 T 的子类型

  1. declare const NsType: unique symbol;
  2. class Ns {
  3. value: number;
  4. [NsType]: void;
  5. constructor(value: number) {
  6. this.value = value;
  7. }
  8. }
  9. declare const LbfsType: unique symbol;
  10. class Lbfs {
  11. value: number;
  12. [LbfsType]: void;
  13. constructor(value: number) {
  14. this.value = value;
  15. }
  16. }
  17. function acceptNs(momentum: Ns): void {
  18. console.log(`Momentum:${momentum.value} Ns`);
  19. }
  20. // Argument of type 'Lbfs' is not assignable to parameter of type 'Ns'.
  21. // Property '[NsType]' is missing in type 'Lbfs' but required in type 'Ns'.
  22. acceptNs(new Lbfs(10));

顶层类型和运行时检查

顶层类型:如果我们能够把任何值赋给一个类型,就称该类型为顶层类型。

unknown

可以将任意类型的值赋值给 unknown,但 unknown 类型的值只能赋值给 unknown 或 any

  1. let result: unknown;
  2. let num: number = result; // 提示 ts(2322)
  3. let anything: any = result; // 不会提示错误

使用 unknown 后,TypeScript 会对它做类型检测。如果不缩小类型(Type Narrowing),我们对 unknown 执行的任何操作都会出现如下所示错误:

  1. let result: unknown;
  2. result.toFixed(); // 提示 ts(2571)
  1. let result: unknown;
  2. if (typeof result === 'number') {
  3. result.toFixed(); // 此处 hover result 提示类型是 number,不会提示错误
  4. }

Ts 中的顶层类型:Object | null | undefined(被定义为 unknown)

对于unknown的情况,只有当我们确认一个值具有某个类型(如User)时,才能把该值用作该类型。对于any的情况,我们可以立即把该值用作其他任何类型的值。any会绕过类型检查。

  1. class User {
  2. name: string;
  3. constructor(name: string) {
  4. this.name = name;
  5. }
  6. }
  7. function deserialize(input: string): unknown {
  8. return JSON.parse(input);
  9. }
  10. function greet(user: User): void {
  11. console.log(`hi ${user.name}`);
  12. }
  13. function isUser(user: any): user is User {
  14. if (user === null || user === undefined) {
  15. return false;
  16. }
  17. return typeof user.name === 'string';
  18. }
  19. let user: unknown = deserialize('{"name": "Alice"}');
  20. if (isUser(user)) {
  21. greet(user);
  22. }
  23. user = deserialize("null");
  24. // Argument of type 'unknown' is not assignable to parameter of type 'User'.ts(2345)
  25. // 从可以就可以看出使用 unknown 可以避免绕过类型检查
  26. greet(user);

底层类型

如果一个类型是其他类型的子类型,就称之为底层类型

Ts 中 never 是底层类型,所以能把它赋值给其他任何类型

  1. enum TurnDirection {
  2. Left,
  3. Right
  4. }
  5. function turnAngle(turn: TurnDirection): number {
  6. switch (turn) {
  7. case TurnDirection.Left: return -90;
  8. case TurnDirection.Right: return 90;
  9. default: return fail("Unknow turnDirection");
  10. }
  11. }
  12. function fail(message: string): never {
  13. console.log(message);
  14. throw new Error(message);
  15. }

面向对象

面向对象编程(Object-Oriented Programming, OOP)

OOP 是基于对象的概念的一种编程范式,对象可以包含数据和代码。 数据是对象的状态,代码是一个或多个方法,也叫做“消息”。 在面向对象系统中,通过使用其他对象的方法,对象之间可以“对话”或者发送消息。

  • 封装:允许隐藏数据和方法
  • 继承:使用额外的数据和代码扩展一个类型

    组合

    ```typescript class Shape { id: string;

    constructor(id: string) {

    1. this.id = id;

    } }

class Point { y: number; x: number;

  1. constructor(x: number, y: number) {
  2. this.x = x;
  3. this.y = y;
  4. }

}

class Circle extends Shape { // 成为类型的组成部分 center: Point; radius: number;

  1. constructor(id: string, center: Point, radius: number) {
  2. super(id);
  3. this.center = center;
  4. this.radius = radius;
  5. }

}

  1. <a name="5qQ7q"></a>
  2. # 泛型数据结构
  3. > 泛型类型是指参数化一个或多个类型的泛型函数、类、接口等。泛型类型允许我们编写能够使用不同类型的通用代码,从而实现高度的代码重用。
  4. <a name="3vo7j"></a>
  5. ## 泛型约束
  6. 泛型使得我们能够使用无数的类型,为了控制类型的范围,则出现了泛型约束的概念。
  7. ```typescript
  8. interface LengthDefine {
  9. length: number;
  10. }
  11. //这样函数参数就必须拥有 length 的属性
  12. student = <T extends LengthDefine>(value: T): T => {
  13. console.log(value.length);
  14. return value;
  15. }

参考资料

  1. TypeScript 策略模式讲解和代码示例
  2. 十分钟学会有限状态机的实现原理