代码直观对比：同样的逻辑在JavaScript和TypeScript中怎么写？

// 需要层层防范传入的脏数据
function calculateTotal(price, quantity, discount = 0) {
  if (typeof price !== 'number' || price < 0) {
    throw new TypeError('单价必须是非负数值');
  }
  if (!Number.isInteger(quantity) || quantity <= 0) {
    throw new TypeError('购买数量必须为正整数');
  }
  if (typeof discount !== 'number' || discount < 0 || discount > 1) {
    throw new RangeError('折扣范围必须在 0 到 1 之间');
  }

  // 业务主体仅有两行
  const subtotal = price * quantity;
  return Number((subtotal * (1 - discount)).toFixed(2));
}

// 调用时若不小心传错，只有运行到此处才会崩溃
calculateTotal('99', 2); // 运行时抛出 TypeError

// 参数类型与返回值在签名中严格约束
function calculateTotal(
  price: number,
  quantity: number,
  discount: number = 0
): number {
  // 仅保留纯业务相关的边界校验（数值范围）
  if (price < 0 || discount < 0 || discount > 1) {
    throw new RangeError('价格或折扣数值超出合法范围');
  }

  const subtotal = price * quantity;
  return Number((subtotal * (1 - discount)).toFixed(2));
}

// 编码与编译阶段直接标红阻断
calculateTotal('99', 2);
// 错误：类型 "string" 的参数不能赋给类型 "number" 的参数

// 无法直观看出完整的有效字段列表
function renderUserProfile(user) {
  // 必须层层防范空指针与未定义
  const name = user?.name || '匿名用户';
  const email = user?.contact?.email;
  const theme = user?.preferences?.theme ?? 'light';

  // 常见失误：拼写错误导致返回 undefined，静默失效
  const phone = user?.contcat?.phone; 

  return { name, email, phone, theme };
}

// 外部可以传入任意形状的对象，缺少约束
renderUserProfile({ title: '无效对象' });

// 声明确切的数据形态、只读与可选规则
interface UserContact {
  email: string;
  phone?: string; // 可选属性
}

interface UserProfile {
  readonly id: number; // 防篡改只读
  name: string;
  contact?: UserContact;
  preferences?: { theme: 'light' | 'dark' };
}

function renderUserProfile(user: UserProfile) {
  const name = user.name;
  const email = user.contact?.email;
  
  // 编译报错：属性 "contcat" 不存在于 "UserProfile" 上
  // 并给出智能纠错建议：“你是否是指 'contact'？”
  const phone = user.contact?.phone; 

  return { name, email, phone };
}

// 状态字段平铺，极易出现矛盾的组合
function renderStatus(state) {
  if (state.status === 'loading') {
    return '正在加载...';
  } 
  if (state.status === 'success') {
    // 隐患：虽然 status 是 success，但无法保证 data 必然存在
    return `数据：${state.data.join(', ')}`;
  }
  if (state.status === 'error') {
    return `错误：${state.error.message}`;
  }
  return '未初始化';
}

// 漏掉属性或状态组合异常时，容易在深层抛错
renderStatus({ status: 'success' }); 
// Cannot read properties of undefined (reading 'join')

// 每一个状态都是互斥且自洽的类型
type RequestState =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: string[] }
  | { status: 'error'; error: Error };

function renderStatus(state: RequestState): string {
  switch (state.status) {
    case 'idle':
      return '未初始化';
    case 'loading':
      return '正在加载...';
    case 'success':
      // TS 精确推导此处 state 必有 data: string[]
      return `数据：${state.data.join(', ')}`;
    case 'error':
      // 此处必有 error: Error，自动补全 message
      return `错误：${state.error.message}`;
    default: {
      // 穷尽性检查：确保未来扩展状态时不会被遗漏
      const _check: never = state;
      return _check;
    }
  }
}

// 通用请求函数：无法约束返回实体
async function fetchJson(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP 错误: ${response.status}`);
  }
  return response.json();
}

// 调用端：没有任何字段代码提示
async function main() {
  const res = await fetchJson('/api/user/101');
  
  // 没有代码补全，打错属性名不会有任何报警
  console.log(res.nikename); // undefined
}

// 统一通用响应外壳
interface ApiResponse<T> {
  code: number;
  message: string;
  data: T; // 泛型动态载荷
}

// 泛型请求工具函数
async function fetchJson<T>(url: string): Promise<ApiResponse<T>> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP error`);
  return res.json();
}

// 业务端调用：明确注入具体数据模型
interface User { id: number; nickname: string }

async function main() {
  const res = await fetchJson<User>('/api/user/101');
  // IDE 自动提示 res.data.nickname 与 res.data.id
  console.log(res.data.nickname);
}