联合类型与类型收窄

type Id = string | number;
 
let id: Id = 101;
id = "A-101";      // 都可以

function print(id: string | number) {
  // id.toUpperCase();   // 错误：number 上不存在 toUpperCase
  console.log(id.toString());   // 可以：两者都有 toString
}

type Direction = "up" | "down";
type Dice = 1 | 2 | 3 | 4 | 5 | 6;
type Flag = true;

// 比 boolean 参数好得多，调用处一眼看懂
function setAlign(a: "left" | "center" | "right"): void {}

type WithId = { id: string };
type WithTime = { createdAt: number };
type Entity = WithId & WithTime;    // 两个属性都必须有

type Id = string | number;
type Align = "left" | "center" | "right";
 
function showId(id: Id): string {
  // 只能用共有成员
  return "ID: " + id.toString();
}
console.log(showId(101));
console.log(showId("A-101"));
 
function pad(text: string, width: number, align: Align): string {
  const gap = Math.max(0, width - text.length);
  if (align === "left") return text + " ".repeat(gap);
  if (align === "right") return " ".repeat(gap) + text;
  const left = Math.floor(gap / 2);
  return " ".repeat(left) + text + " ".repeat(gap - left);
}
console.log("[" + pad("hi", 6, "left") + "]");
console.log("[" + pad("hi", 6, "right") + "]");
console.log("[" + pad("hi", 6, "center") + "]");
 
// 交叉类型：组合能力
type WithId = { id: string };
type WithTime = { createdAt: string };
type Entity = WithId & WithTime;
 
const e: Entity = { id: "u_1", createdAt: "2024-06-01" };
console.log(e.id + " 创建于 " + e.createdAt);

function f(x: string | number) {
  if (typeof x === "string") {
    x.toUpperCase();     // 这里 x 是 string
  } else {
    x.toFixed(2);        // 这里 x 是 number
  }
}

function greet(name?: string) {
  if (name) {
    console.log(name.toUpperCase());   // name 是 string
  }
}

type Fish = { swim: () => void };
type Bird = { fly: () => void };
 
function move(a: Fish | Bird) {
  if ("swim" in a) a.swim();
  else a.fly();
}

// typeof 收窄
function format(x: string | number | boolean): string {
  if (typeof x === "string") return "字符串: " + x.toUpperCase();
  if (typeof x === "number") return "数字: " + x.toFixed(2);
  return "布尔: " + String(x);
}
console.log(format("ts"));
console.log(format(3.14159));
console.log(format(true));
 
// 真值收窄 + 排除 null
function nameLength(s: string | null | undefined): number {
  if (s != null) return s.length;   // 同时排除 null 和 undefined
  return 0;
}
console.log("长度 = " + nameLength("hello") + " / " + nameLength(null));
 
// in 收窄
type Fish = { name: string; swim: () => string };
type Bird = { name: string; fly: () => string };
 
function move(a: Fish | Bird): string {
  if ("swim" in a) return a.name + " " + a.swim();
  return a.name + " " + a.fly();
}
const nemo: Fish = { name: "尼莫", swim: () => "在游泳" };
const tweety: Bird = { name: "崔弟", fly: () => "在飞" };
console.log(move(nemo));
console.log(move(tweety));
 
// instanceof 收窄
function describe(v: Date | Error | string[]): string {
  if (v instanceof Date) return "日期，年份 " + v.getFullYear();
  if (v instanceof Error) return "错误: " + v.message;
  return "数组，共 " + v.length + " 项";
}
console.log(describe(new Date("2024-06-01T00:00:00Z")));
console.log(describe(new Error("出错了")));
console.log(describe(["a", "b"]));

type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Shape = Circle | Square;
 
function area(s: Shape): number {
  switch (s.kind) {
    case "circle": return Math.PI * s.radius ** 2;   // s 是 Circle
    case "square": return s.side ** 2;                // s 是 Square
  }
}

// 反模式：无法表达「圆一定有半径」
type BadShape = { kind: string; radius?: number; side?: number };

type Circle = { kind: "circle"; radius: number };
type Rect = { kind: "rect"; width: number; height: number };
type Triangle = { kind: "triangle"; base: number; height: number };
type Shape = Circle | Rect | Triangle;
 
function assertNever(x: never): never {
  throw new Error("未处理的形状: " + JSON.stringify(x));
}
 
function area(s: Shape): number {
  switch (s.kind) {
    case "circle":
      return Math.PI * s.radius * s.radius;
    case "rect":
      return s.width * s.height;
    case "triangle":
      return (s.base * s.height) / 2;
    default:
      return assertNever(s);
  }
}
 
const shapes: Shape[] = [
  { kind: "circle", radius: 2 },
  { kind: "rect", width: 3, height: 4 },
  { kind: "triangle", base: 6, height: 5 },
];
 
for (const s of shapes) {
  console.log(s.kind + " 面积 = " + area(s).toFixed(2));
}
 
// 另一个经典场景：请求状态机
type Result =
  | { status: "loading" }
  | { status: "success"; data: string[] }
  | { status: "error"; message: string };
 
function render(r: Result): string {
  switch (r.status) {
    case "loading":
      return "加载中...";
    case "success":
      return "拿到 " + r.data.length + " 条数据";
    case "error":
      return "失败: " + r.message;
    default:
      return assertNever(r);
  }
}
 
console.log(render({ status: "loading" }));
console.log(render({ status: "success", data: ["a", "b", "c"] }));
console.log(render({ status: "error", message: "超时" }));

function isString(v: unknown): v is string {
  return typeof v === "string";
}

function f(x: string | null) {
  if (x === null) return;
  // 这里 x 是 string
  setTimeout(() => {
    // x 仍然是 string —— 因为 x 是 const 语义的参数且没被重新赋值
  }, 0);
}

if (config.retry !== undefined) {
  doSomething();
  // config.retry 的收窄可能已失效
}

const isString = typeof value === "string";
if (isString) {
  value.toUpperCase();     // 4.4 起可以正确收窄
}