TypeScript类型断言与类型缩小：精准控制类型安全的实战指南

// 1. as语法（推荐，无冲突）
const value: string | number = "hello";
const strLength = (value as string).length; // 断言为string，安全访问length

// 2. <Type>语法（不推荐，React中报错）
const num = 123;
const str = <string>(value); // 非React环境可用，但可读性差

// ❌ React环境踩坑：<div>会被解析为JSX，与断言语法冲突
// const el = <HTMLDivElement>document.getElementById("app");

// 场景1：DOM元素获取（TS默认推断为HTMLElement | null）
// 开发者明确知道#app是div元素，用断言缩小类型
const appEl = document.getElementById("app") as HTMLDivElement;
appEl.style.color = "red"; // 断言后可安全访问div专属属性

// 场景2：接口返回数据（TS推断为any或宽泛类型）
interface User { name: string; age: number }
// 接口返回数据，断言为User类型，获得类型提示
const fetchUser = async (): Promise<User> => {
  const res = await fetch("/api/user");
  return res.json() as User; // 断言为User，避免any类型
};

// 1. DOM元素非空断言（替代as HTMLDivElement + 非空判断）
const appEl = document.getElementById("app")!; // !表示非空
appEl.style.fontSize = "16px"; // 无需额外判断，直接使用

// 2. 排除函数参数的undefined
function getLength(str: string | undefined) {
  // !断言str非空，避免“无法调用可能为undefined的对象”报错
  return str!.length;
}

// 3. 类属性初始化延迟（明确后续会赋值）
class User {
  name!: string; // !表示非空，承诺在使用前赋值

  constructor() {
    this.initName();
  }

  initName() {
    this.name = "张三";
  }
}

// 联合类型，TS默认推断为string | number
function handleValue(value: string | number) {
  // if判断+typeof，TS自动缩小类型为string
  if (typeof value === "string") {
    return value.trim(); // 安全访问string专属方法
  }
  // 剩余分支，TS自动缩小类型为number
  return value.toFixed(2); // 安全访问number专属方法
}

// switch语句同样触发自动缩小
type Animal = { type: "dog"; wang: () => void } | { type: "cat"; miao: () => void };
function animalCry(animal: Animal) {
  switch (animal.type) {
    case "dog":
      animal.wang(); // TS自动推断为dog类型
      break;
    case "cat":
      animal.miao(); // TS自动推断为cat类型
      break;
  }
}

// 基础模板字面量类型：仅允许"hello + 任意字符串"格式
type Greeting = `hello ${string}`;
const greet1: Greeting = "hello 张三"; // 合法
const greet2: Greeting = "hi 李四"; // 报错：不符合"hello "开头格式

// 进阶用法：结合联合类型，限定可选格式
type Direction = "left" | "right" | "up" | "down";
type MoveCommand = `move-${Direction}`; // 仅允许"move-left/right/up/down"

const cmd1: MoveCommand = "move-left"; // 合法
const cmd2: MoveCommand = "move-top"; // 报错：无"top"方向选项

// 类型缩小场景：判断字符串是否符合模板类型
function isMoveCommand(cmd: string): cmd is MoveCommand {
  return cmd.startsWith("move-") && ["left", "right", "up", "down"].includes(cmd.split("-")[1]);
}

// 实战：获取输入框元素，设置值并监听事件
function initInput() {
  // 非空断言+类型断言：明确是HTMLInputElement且非空
  const inputEl = document.getElementById("username")! as HTMLInputElement;
  
  // 安全操作输入框属性
  inputEl.placeholder = "请输入用户名";
  inputEl.value = "默认用户名";
  
  // 监听输入事件，控制流分析自动缩小类型
  inputEl.addEventListener("input", (e) => {
    // e.target自动推断为HTMLInputElement
    console.log("输入内容：", e.target.value);
  });
}

// 接口返回数据类型（联合类型）
type ApiResponse = 
  | { status: "success"; data: User[] }
  | { status: "error"; message: string }
  | { status: "loading" };

// 用类型缩小解析数据
function handleApiResponse(res: ApiResponse) {
  switch (res.status) {
    case "success":
      // TS自动缩小为success类型，安全访问data
      console.log("用户列表：", res.data.map(user => user.name));
      break;
    case "error":
      // 自动缩小为error类型，访问message
      console.error("请求失败：", res.message);
      break;
    case "loading":
      console.log("加载中...");
      break;
  }
}