《TypeScript编程入门》4.2 重载、this 类型与箭头函数

function chunk(input: string | string[], size: number): string[] | string[][] {
  if (!Number.isInteger(size) || size <= 0) throw new Error("size 必须是正整数");
  const parts: string[] | string[][] = [];
  for (let i = 0; i < input.length; i += size) {
    if (typeof input === "string") (parts as string[]).push(input.slice(i, i + size));
    else (parts as string[][]).push(input.slice(i, i + size));
  }
  return parts;
}
const a = chunk("abcdef", 2);
console.log(a.join("")); // abcdef：两种数组都有 join，调用合法
// a[0]?.toUpperCase(); // TS2339：元素可能是 string[]，没有 toUpperCase

// 重载签名（overload signatures）——只有声明，没有实现
function chunk(input: string, size: number): string[];
function chunk(input: string[], size: number): string[][];
// 实现签名（implementation signature）——对外不可见
function chunk(input: string | string[], size: number): string[] | string[][] {
  if (!Number.isInteger(size) || size <= 0) throw new Error("size 必须是正整数");
  if (typeof input === "string") {
    const parts: string[] = [];
    for (let i = 0; i < input.length; i += size) parts.push(input.slice(i, i + size));
    return parts;
  }
  const parts: string[][] = [];
  for (let i = 0; i < input.length; i += size) parts.push(input.slice(i, i + size));
  return parts;
}
const a = chunk("abcdef", 2); // string[]
const b = chunk(["a", "b", "c"], 2); // string[][]
console.log(a[0]?.toUpperCase()); // AB
console.log(JSON.stringify(b)); // [["a","b"],["c"]]

function parse(value: string): number;
function parse(value: string, radix: number): number;
function parse(value: string, radix?: number): number {
  return parseInt(value, radix);
}
// 合法：匹配第一个重载
parse("10");
// 合法：匹配第二个重载
parse("10", 2);
// Error: No overload expects 3 arguments, but overloads do exist that expect
// either 1 or 2 arguments.
parse("10", 2, 3);

function fn(x: string): number;
// Error: This overload signature is not compatible with its implementation signature.
function fn(x: string): string {
  return x;
}

// 错误顺序：宽泛的签名写在前面
function len(x: any): number;
function len(x: string): number;
function len(x: string | any[]): number {
  return x.length;
}
const n = len("hello");
// n 的类型是 number —— 结果对，但匹配的是第一个 any 签名

// 正确顺序：具体的在前，宽泛的在后
function first<T>(arr: T[]): T | undefined;
function first(str: string): string;
function first(input: string | unknown[]): unknown {
  return typeof input === "string" ? input[0] : input[0];
}

interface User { id: number; name: string; }
function fetchUser(id: number): User;
function fetchUser(id: number, withEmail: true): User & { email: string };
function fetchUser(id: number, withEmail?: boolean): User | (User & { email: string }) {
  const user: User = { id, name: `user-${id}` };
  return withEmail ? { ...user, email: `${id}@example.com` } : user;
}
const u1 = fetchUser(1); // User
const u2 = fetchUser(1, true); // User & { email: string }
console.log(u2.email); // OK

function fn(x: string): string;
function fn(x: number): number;
// Error: This overload signature is not compatible with its implementation signature.
function fn(x: string): string {
  return x;
}

const counter = {
  count: 0,
  increment() {
    this.count += 1;
  },
};
const inc = counter.increment;
inc(); // this 变成了 undefined（严格模式）或 globalThis

function increment(this: { count: number }): void {
  this.count += 1;
}
const counter = { count: 0, increment };
counter.increment(); // OK，this 是 counter
console.log(counter.count); // 1
const inc = counter.increment;
// Error: The 'this' context of type 'void' is not assignable to method's
// 'this' of type '{ count: number; }'.
inc();

// 1. this 参数必须是第一个参数，且不能有默认值
// Error: A 'this' parameter must be the first parameter.
function bad(x: number, this: { count: number }) {}

// 2. this 参数不参与调用方的实参计数
function setValue(this: { value: string }, v: string): void {
  this.value = v;
}

const obj = { value: "", setValue };
obj.setValue("hi"); // 只传一个实参

class Timer {
  seconds = 0;

  // 普通方法：this 是 Timer 实例
  tickNormal(): void {
    setTimeout(function () {
      // Error: 'this' implicitly has type 'any' because it does not have a
      // type annotation.
      this.seconds += 1;
    }, 1000);
  }

  // 箭头函数：this 继承自 tickArrow
  tickArrow(): void {
    setTimeout(() => {
      this.seconds += 1; // OK，this 是 Timer
    }, 1000);
  }
}

class Timer2 {
  seconds = 0;

  tick(): void {
    // 方案一：显式声明 this 参数（此时 this 仍是运行时传入的，可能不对）
    setTimeout(function (this: Timer2) {
      this.seconds += 1;
    }, 1000);

    // 方案二（推荐）：提前存到变量，用闭包捕获
    const self = this;
    setTimeout(function () {
      self.seconds += 1;
    }, 1000);

    // 方案三（最推荐）：直接用箭头函数
    setTimeout(() => {
      this.seconds += 1;
    }, 1000);
  }
}

class Button {
  label = "OK";

  // 箭头函数字段：this 被永久锁定为 Button 实例
  handleClick = (): void => {
    console.log(`clicked ${this.label}`);
  };
}

const btn = new Button();
const handler = btn.handleClick;
handler(); // "clicked OK" —— 即使被摘下来调用，this 依然正确

const collector = {
  items: [] as string[],
  collect(values: string[]): void {
    // 箭头函数：this 是 collector，符合预期
    values.forEach((v) => this.items.push(v));
  },
};

collector.collect(["a", "b"]);
console.log(collector.items); // ["a", "b"]

function Serializable<TBase extends new (...args: any[]) => object>(Base: TBase) {
  return class extends Base {
    serialize(this: { toJSON(): unknown }): string {
      return JSON.stringify(this.toJSON());
    }
  };
}