1
2
3
4
5
6

// 🛑 三行全绿，运行时炸
async function loadUser(id: string) {
  const res = await fetch(`/api/users/${id}`);
  const user: User = await res.json();       // ✅ 编译通过
  return user.name.toUpperCase();            // 💥 若响应是 { username: ... }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// ✅ 守住边界
import { z } from "zod";

const UserSchema = z.object({ id: z.number(), name: z.string() });
type User = z.infer<typeof UserSchema>;

async function loadUser(id: string): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  const raw: unknown = await res.json();
  return UserSchema.parse(raw);              // ✅ 真检查
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 🛑 真值判断吞掉合法值
function retry(times: number | null) {
  if (times) return times * 2;    // times = 0 时走 else！
  return 0;
}

// ✅ 显式判断
function retry2(times: number | null) {
  return times !== null ? times * 2 : 0;
}

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

// 🛑 回调里收窄失效
function bad(v: string | null) {
  if (v !== null) {
    setTimeout(() => v.toUpperCase(), 0);
    //                ~ TS18047: 'v' is possibly 'null'.
  }
}

// ✅ 先存 const
function good(v: string | null) {
  if (v !== null) {
    const s = v;
    setTimeout(() => s.toUpperCase(), 0);   // ✅
  }
}

1
2
3
4

// 🛑 三个都合法，但含义差很远
const a: {} = "字符串可以";        // ✅ 合法
const b: object = "字符串不行";    // ❌ TS2322
const c: object = () => {};        // ✅ 函数也是 object

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 🛑 typeof null 是 "object"（JS 历史 bug）
function f(v: string | null) {
  if (typeof v === "object") {
    return "null 也会进来！";
  }
  return v;
}

// ✅ 正确判非空对象
if (typeof v === "object" && v !== null) { /* ... */ }

1
2
3
4
5
6
7

// 🛑 分配律：期望整体判断，结果逐成员判断
type IsString<T> = T extends string ? true : false;
type A = IsString<string | number>;   // boolean（不是 false！）

// ✅ 用元组阻止分配
type IsString2<T> = [T] extends [string] ? true : false;
type B = IsString2<string | number>;  // false

1
2
3

// 🛑 这个文件没有 import/export，是「脚本」
interface Config { url: string }
// ↑ 这是全局声明！会污染整个项目，且可能与其他文件冲突

1
2
3
4

// ✅ 加一行让它成为模块
export {};                        // 或 import type {} from "x"

interface Config { url: string }  // 现在只在本文件内可见

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

// 🛑 private 只是编译期
class Secret {
  private key = "abc";
}
const s = new Secret();
(s as any).key;              // ✅ 运行时拿得到
s["key"];                    // ✅ 也拿得到

// ✅ # 是运行时真私有
class Secret2 {
  #key = "abc";
  getKey() { return this.#key; }
}
const s2 = new Secret2();
(s2 as any).#key;            // ❌ 语法错误
Object.keys(s2);             // [] —— 完全看不到

1
2
3
4
5
6
7
8
9

// 🛑 enum：生成运行时代码，且不能通过 erasableSyntaxOnly
export enum Status { Idle = "idle", Done = "done" }

// ✅ 推荐：as const 对象
export const Status = {
  Idle: "idle",
  Done: "done",
} as const;
export type Status = (typeof Status)[keyof typeof Status];   // "idle" | "done" 🔥

1
2
3
4
5

// 🛑 数组协变的不健全漏洞
let strs: string[] = ["a"];
let anys: (string | number)[] = strs;   // ✅ 编译通过
anys.push(123);                          // ✅ 也通过
strs[1].toUpperCase();                   // 💥 运行时崩溃

1
2
3
4
5

// ✅ 防御：函数参数用 readonly
function sum(xs: readonly number[]): number { /* ... */ }

// ✅ 或复制后再操作
const sorted = [...items].sort((a, b) => a - b);

1
2
3
4
5
6

// 🛑 any 传染
declare const data: any;
const a = data.foo;         // any
const b = a.bar;            // any
function f(x: any) { return x.baz; }
const c = f(1);             // any —— 三跳之后依然是 any

1
2
3
4
5

// ✅ @ts-expect-error 会自我清理
// @ts-expect-error 上游库缺少该重载，见 issue #123
legacyCall(x);
// 上游修好后 → error TS2578: Unused '@ts-expect-error' directive.
// → CI 失败 → 你删掉它 ✅

1
2
3
4
5
6
7
8
9

// 🛑 Error 序列化成空对象
JSON.stringify(new Error("出错了"));   // "{}"

// ✅ 手动序列化
const serialized = {
  name: err.name,
  message: err.message,
  stack: err.stack,
};

1
2
3
4
5
6
7
8
9

// 🛑 数组选项不会合并
// tsconfig.base.json
{ "compilerOptions": { "lib": ["ES2023", "DOM", "DOM.Iterable"] } }

// tsconfig.json
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": { "lib": ["ES2023"] }   // ⚠️ DOM 全丢了！
}

1
2
3
4
5

// ✅ 写完整
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": { "lib": ["ES2023", "DOM", "DOM.Iterable"] }
}