1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 重载签名（对外可见）
function parse(input: string): string[];
function parse(input: number): number[];
// 实现签名（对外不可见）
function parse(input: string | number): string[] | number[] {
  return typeof input === "string" ? input.split("") : [input];
}

const a = parse("x");   // string[]
const b = parse(1);     // number[]
parse(true);            // ❌ TS2769: No overload matches this call.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function bad(x: unknown): unknown;
function bad(x: string): string;
function bad(x: unknown): unknown { return x; }

const r = bad("a");     // 类型是 unknown 🛑 因为第一个签名先匹配上了

function good(x: string): string;
function good(x: unknown): unknown;
function good(x: unknown): unknown { return x; }

const r2 = good("a");   // ✅ string —— 窄的在前

1
2
3
4
5
6

interface Fn {
  (x: string): string;    // 调用签名，可以多个 = 重载
  (x: number): number;
}
declare const f: Fn;
const s = f("a");         // string

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function handler(this: HTMLElement, e: Event) {
  this.classList.add("active");   // ✅ this 有类型
}

// 调用时必须保证 this 类型正确
button.addEventListener("click", handler);   // ✅ 事件系统会绑定正确的 this
handler.call(div, new Event("click"));       // ✅

// 🛑 单独调用会把 this 推断为 void，报错
const h = handler;
h(new Event("click"));   // ❌ TS2684: The 'this' context of type 'void' is not
                         //    assignable to method's 'this' of type 'HTMLElement'.

1
2
3
4
5
6
7
8

// 1. 普通函数
function f(this: { count: number }) { this.count++; }

// 2. 对象/接口方法
interface Counter {
  count: number;
  inc(this: Counter): void;    // 显式 this 便于把方法拆出去复用
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

class Widget {
  name = "w";
  renderBad() {
    // 🛑 普通函数会丢 this
    return [1].map(function (n) { return this.name; });   // ❌ TS2683: 'this' implicitly has type 'any'
  }
  renderGood() {
    // ✅ 箭头函数继承外围 this
    return [1].map((n) => this.name);
  }
}

1
2
3
4
5
6
7
8
9

type Wide   = (x: string | number) => void;
type Narrow = (x: string) => void;

declare const wide: Wide;
declare const narrow: Narrow;

const a: Wide = narrow;   // ❌ TS2322: 参数不兼容
//    ~ Type '(x: string) => void' is not assignable to type '(x: string | number) => void'.
const b: Narrow = wide;   // ✅ 更宽的函数可以当更窄的用

1
2
3
4
5
6
7

type AsProp   = { f: (x: string | number) => void };   // 函数属性 -> 严格逆变
type AsMethod = { f(x: string | number): void };       // 方法语法 -> 双变

declare const narrowM: { f(x: string): void };

const p: AsProp   = { f: narrowM.f };   // ❌ TS2322
const m: AsMethod = narrowM;            // ✅ 放行 ⚠️

1
2
3
4
5
6
7

type Cb = () => void;

const returnsValue = () => 42;
const cb: Cb = returnsValue;      // ✅ 合法

[1, 2, 3].forEach((n) => n * 2);  // ✅ 返回了值也合法
[1, 2, 3].forEach((n) => { n * 2; });   // ✅ 返回 void 也合法

1

function f(): void { return 42; }   // ❌ TS2322: Type 'number' is not assignable to type 'void'.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

type Dict = { [key: string]: number };
const d: Dict = { a: 1, b: 2 };
const v = d["anything"];        // number

// 也可以用 Record
type Dict2 = Record<string, number>;

// 数字索引
type Arr = { [index: number]: string };
type Arr2 = string[];           // 更常用

// 同时约束已知键与索引签名
type Mixed = { [k: string]: number; fixed: number };   // ✅ fixed 兼容索引类型

1
2
3

type Bad = { [k: string]: number; fixed: string };
//                                     ~~~~~~ ❌ TS2411: Property 'fixed' of type 'string'
//                                            is not assignable to 'string' index type 'number'.

1
2
3

type Dict = { [k: string]: number };
const d: Dict = { a: 1 };
const v: number = d["missing"];   // ✅ 编译通过，运行时是 undefined 💥

1
2

// 强烈建议开启（注意：它不在 strict 里，需要单独写）
{ "compilerOptions": { "noUncheckedIndexedAccess": true } }

1
2
3

type D = { [k: string]: number };
type K = keyof D;              // string | number ⚠️ 因为 obj[0] 等价于 obj["0"]
type K2 = string & keyof D;    // string —— 这样窄化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

type Opt = { a: number };

const lit: Opt = { a: 1, b: 2 };
//                        ~ ❌ TS2353: Object literal may only specify known properties,
//                                 and 'b' does not exist in type 'Opt'.

// 经过中间变量就不检查了
const viaVar = { a: 1, b: 2 };
const ok1: Opt = viaVar;                 // ✅ 不报错（结构化类型：多属性无害）

// 函数实参位置的字面量也会检查
function take(o: Opt) {}
take({ a: 1, b: 2 });                    // ❌ TS2353

// 展开运算符的结果不触发
const spread = { ...{ b: 2 }, a: 1 };
take(spread);                            // ✅

1
2

interface Config { timeout: number }
const c: Config = { timeOut: 5000 };   // ✅ 没有这个检查就抓不到拼写错误

1
2
3
4
5
6
7
8
9

// 1. 中间变量
const extra = { a: 1, b: 2 };
const o1: Opt = extra;

// 2. 用索引签名接收
const o2: Opt & Record<string, unknown> = { a: 1, b: 2 };

// 3. 明确断言为交叉类型
const o3 = { a: 1, b: 2 } as Opt & { b: number };

1
2
3
4
5
6
7
8

// interface 可以声明合并（库的类型扩充靠这个）
interface Window { myGlobal: string }
interface Window { another: number }
// 结果：Window 同时有两个属性

// type 不能重复声明
type T = { a: number };
type T = { b: number };   // ❌ TS2300: Duplicate identifier 'T'.

1
2
3
4
5

class Bad {
  y: number;
  // ❌ TS2564: Property 'y' has no initializer and is not definitely assigned
  //    in the constructor.
}

1
2
3
4
5

class A { x: number = 0; }                          // 1. 直接给初值
class B { x: number; constructor() { this.x = 1; } } // 2. 构造函数里赋值
class C { x?: number; }                             // 3. 声明为可选
class D { x!: number; }                             // 4. 明确赋值断言（你保证会赋值）⚠️
class E { x: number | undefined; }                  // 5. 允许 undefined

1
2
3
4
5
6
7
8

class Service {
  // NestJS / DI 之类会注入，自己确实不赋值
  private readonly repo!: Repository;

  // 或者在生命周期钩子里赋值
  el!: HTMLElement;
  mounted() { this.el = document.createElement("div"); }
}

1
2
3
4
5
6
7

class Config {
  readonly host: string;
  constructor(host: string) {
    this.host = host;         // ✅ readonly 允许在构造函数里赋值
  }
  change() { this.host = "x"; }   // ❌ TS2540: Cannot assign to 'host'
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

class Base {
  greet() { return "base"; }
  protected secret() { return 1; }
}

class Sub extends Base {
  override greet() { return "sub"; }      // ✅ 显式声明覆盖
  override nope() { return 2; }
  //     ~~~~ ❌ TS4113: This member cannot have an 'override' modifier because
  //            it is not declared in the base class 'Base'.
}

1
2
3
4
5
6
7
8

interface Serializable { serialize(): string }
interface Comparable { compareTo(o: unknown): number }

class Doc implements Serializable, Comparable {
  serialize() { return "{}"; }
  compareTo(o: unknown) { return 0; }
}
// implements 只做检查，编译产物里没有任何痕迹

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

abstract class Shape {
  abstract area(): number;          // 抽象方法：子类必须实现
  describe(): string {              // 具体方法：可直接继承
    return `面积 ${this.area()}`;
  }
}

class Circle extends Shape {
  constructor(private r: number) { super(); }
  area() { return Math.PI * this.r ** 2; }
}

const s = new Shape();   // ❌ TS2511: Cannot create an instance of an abstract class.

1
2

type Ctor<T> = abstract new (...args: any[]) => T;
function create<T>(C: Ctor<T>): T { return new (C as any)(); }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

class User {
  constructor(public name: string) {}
  static create(n: string) { return new User(n); }
  greet() { return this.name; }
}

// 实例类型：直接用类名
const u: User = new User("a");
type Inst = User;                    // 实例类型

// 构造函数类型：用 typeof
type Ctor = typeof User;             // new (name: string) => User，含静态成员
const C: Ctor = User;

// 从构造函数取实例类型
type Inst2 = InstanceType<typeof User>;   // User

1
2
3
4
5

class Registry {
  static items: string[] = [];
  static add(item: string) { this.items.push(item); }   // this 指构造函数
}
Registry.add("a");   // ✅

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

class Temp {
  private _celsius = 0;
  get celsius(): number { return this._celsius; }
  set celsius(v: number) { this._celsius = v; }
}

// TS 5.1+ 允许 getter 和 setter 类型不同
class Box {
  private _v: string | undefined;
  get value(): string { return this._v ?? ""; }
  set value(v: string | undefined) { this._v = v; }   // ✅ 5.1+ 合法
}