当前位置：首页 > news >正文

【TS学习】（20）有关this的类型处理

news 来源：原创 2025/5/14 11:38:45

在 TypeScript 中，this 类型体操（Type Gymnastics with this） 是一种高级用法，通常用于实现复杂的类型推断和链式调用。通过结合 this 类型、条件类型、泛型和其他高级特性，可以实现非常灵活的类型操作。

1. 基础：`this` 类型

(1) 定义

在 TypeScript 中，this 类型表示当前类的实例。
它允许方法返回当前实例本身，从而支持链式调用。

示例

class Counter {
  private count: number = 0;

  increment(): this {
    this.count++;
    return this;
  }

  decrement(): this {
    this.count--;
    return this;
  }

  getCount(): number {
    return this.count;
  }
}

const counter = new Counter();
console.log(counter.increment().decrement().getCount()); // 输出 0

在这里：

increment 和 decrement 方法返回 this，使得可以连续调用这些方法。

2. 高级：`this` 类型与继承

在继承中，this 类型会自动推断为子类的类型。这种行为被称为多态的 this 类型。

示例

class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  setName(name: string): this {
    this.name = name;
    return this;
  }
}

class Dog extends Animal {
  bark(): this {
    console.log(`${this.name} barks`);
    return this;
  }
}

const dog = new Dog("Rex");
dog.setName("Max").bark(); // 输出 "Max barks"

在这里：

setName 方法返回 this，因此可以在链式调用中无缝地调用子类的 bark 方法。

3. 条件类型与 `this`

通过结合条件类型和 this 类型，可以实现动态的类型推断。

示例：动态方法返回类型

class Builder<T> {
  private value: T | null = null;

  setValue(value: T): this {
    this.value = value;
    return this;
  }

  getValue(): T {
    if (this.value === null) {
      throw new Error("Value is not set");
    }
    return this.value;
  }

  reset(): this {
    this.value = null;
    return this;
  }

  transform<U>(transformFn: (value: T) => U): Builder<U> {
    const newValue = transformFn(this.getValue());
    return new Builder<U>().setValue(newValue);
  }
}

const builder = new Builder<number>()
  .setValue(42)
  .transform((value) => value.toString())
  .transform((value) => value.toUpperCase());

console.log(builder.getValue()); // 输出 "42"

在这里：

transform 方法使用条件类型和泛型动态地改变了 Builder 的类型。

4. 泛型与 `this` 的结合

通过将泛型与 this 类型结合，可以实现更加灵活的设计。

示例：类型安全的链式调用

class Chainable<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }

  map<U>(fn: (value: T) => U): Chainable<U> {
    return new Chainable(fn(this.value));
  }

  mutate(fn: (value: T) => void): this {
    fn(this.value);
    return this;
  }
}

const chain = new Chainable(10)
  .mutate((value) => console.log(`Current value: ${value}`))
  .map((value) => value * 2)
  .map((value) => value.toString());

console.log(chain.getValue()); // 输出 "20"

在这里：

mutate 方法返回 this，支持链式调用。
map 方法使用泛型动态地改变了 Chainable 的类型。

5. 条件推断与 `this`

通过结合条件推断和 this 类型，可以实现更复杂的类型操作。

示例：动态扩展方法

type MethodMap<T> = {
  [K in keyof T]: (this: T, ...args: any[]) => T;
};

class Dynamic<T extends MethodMap<T>> {
  call<K extends keyof T>(method: K, ...args: Parameters<T[K]>): ReturnType<T[K]> {
    return (this as any)[method](...args);
  }
}

class Example extends Dynamic<Example> {
  greet(name: string): this {
    console.log(`Hello, ${name}`);
    return this;
  }

  farewell(name: string): this {
    console.log(`Goodbye, ${name}`);
    return this;
  }
}

const example = new Example();
example.call("greet", "Alice").call("farewell", "Bob");
// 输出：
// Hello, Alice
// Goodbye, Bob

在这里：

Dynamic 使用条件推断动态地扩展了 Example 的方法。

6. 实际应用场景

(1) 链式调用

使用 this 类型实现流畅的链式调用。

示例

class QueryBuilder {
  private query: string = "";

  select(columns: string[]): this {
    this.query += `SELECT ${columns.join(", ")}`;
    return this;
  }

  from(table: string): this {
    this.query += ` FROM ${table}`;
    return this;
  }

  where(condition: string): this {
    this.query += ` WHERE ${condition}`;
    return this;
  }

  build(): string {
    return this.query;
  }
}

const query = new QueryBuilder()
  .select(["id", "name"])
  .from("users")
  .where("age > 18")
  .build();

console.log(query); // 输出 "SELECT id, name FROM users WHERE age > 18"

在这里：

每个方法返回 this，支持链式调用。

(2) 动态类型推断

使用泛型和条件类型动态地推断返回值类型。

示例

class State<T> {
  private state: T;

  constructor(initialState: T) {
    this.state = initialState;
  }

  setState<K extends keyof T>(key: K, value: T[K]): this {
    this.state[key] = value;
    return this;
  }

  getState(): T {
    return this.state;
  }
}

const state = new State({ name: "Alice", age: 30 })
  .setState("age", 31)
  .setState("name", "Bob");

console.log(state.getState()); // 输出 { name: "Bob", age: 31 }