为什么聪明的工程师都在用TypeScript写AI辅助代码？

📌 在JavaScript项目中，AI工具能看到：
  ├─ 变量名字（namePrice? userPrice? 还是只是 price?）
  ├─ 函数用法（这个函数在哪被调用？怎么被调用的？）
  ├─ 注释内容（有人写了说明吗？还是全靠猜？）
  └─ 周围代码模式（其他函数怎么写的？）

结果：信号弱，容易误判 ❌

📌 在TypeScript项目中，AI工具能看到：
  ├─ 显式的类型声明（price: number，不会弄错）
  ├─ 接口定义（这个对象必须包含哪些字段）
  ├─ 函数签名（参数类型、返回类型一目了然）
  ├─ Union types（只能是这几个值中的一个）
  └─ 所有上面的JavaScript信号

结果：信号强，理解准确 ✅

function formatPrice(price) {  
  return "$" + price.toFixed(2)  
}

function formatPrice(price: number): string {  
  return "$" + price.toFixed(2)  
}

function Button(props) {
  return (
    <button 
      className={`btn ${props.variant}`}
      disabled={props.disabled}
      onClick={props.onClick}
    >
      {props.label}
    </button>
  )
}

// AI的第一反应
function Button(props) {
  return (
    <button 
      className={`btn ${props.variant} ${props.size}`}
      disabled={props.disabled}
      onClick={props.onClick}
      size={props.size}  // ❌ HTML button没有这个属性！
    >
      {props.label}
    </button>
  )
}

interface ButtonProps {
  label: string
  variant?: 'primary' | 'secondary' | 'tertiary'
  size?: 'small' | 'medium' | 'large'
  disabled?: boolean
  onClick?: () =>void
}

function Button({ label, variant = 'primary', size = 'medium', disabled, onClick }: ButtonProps) {
const sizeClass = {
    small: 'px-2 py-1 text-sm',
    medium: 'px-4 py-2 text-base',
    large: 'px-6 py-3 text-lg'
  }[size]

return (
    <button 
      className={`btn btn-${variant} ${sizeClass}`}
      disabled={disabled}
      onClick={onClick}
    >
      {label}
    </button>
  )
}

周一 10:00: AI生成了一个组件功能
周一 14:00: 发现Bug，改一下参数传递
周二 09:00: 又发现一个问题，调试半小时
周二 15:00: 最后算是稳定了

总耗时：6小时左右

周一 10:00: AI生成了一个组件功能
周一 10:15: 类型检查，发现两个小问题
周一 10:30: 改好了，确认工作

总耗时：30分钟

后续：其他人使用这个组件时，
因为有类型定义，IDE直接告诉他怎么用，
不会用错，0 bug

// 快速试验：验证一个算法是否可行
function calculateDiscount(items) {
  return items
    .filter(item => item.price > 100)
    .map(item => ({ ...item, price: item.price * 0.8 }))
}

// 三分钟写好，一分钟验证想法。完美。

// scripts/migrate-data.js
// 这个脚本就跑一次，然后就删了
const fs = require('fs')
const data = JSON.parse(fs.readFileSync('./old-data.json'))
// ... 处理逻辑
fs.writeFileSync('./new-data.json', JSON.stringify(processed))

console.log('迁移完成！')

// 就是简单地操作DOM，没那么复杂
const button = document.querySelector('.submit-btn')
button.addEventListener('click', () => {
  const name = document.querySelector('input').value
  sendData(name)
})

┌─────────────────────────────────────────┐
│   "这个项目会有多少人维护？"              │
│   "代码会活多久？"                       │
│   "有多少AI生成的代码？"                 │
│   "错了的代价有多大？"                   │
└─────────────────────────────────────────┘

答案是"是"？👉 用TypeScript
答案是"不是"？👉 JavaScript也行

你的项目架构
│
├─ 🌟 public API / 公开接口 ← 从这里开始！
│  └─ 其他代码依赖这些接口
│
├─ 🌟 共享工具库 / Utilities ← 然后是这里
│  └─ 整个项目都用
│
├─ 🌟 组件库 / Components ← 再然后这里
│  └─ 其他开发者会用
│
└─ ⚪ 内部业务逻辑 ← 这个最后改，甚至可以不改
   └─ 改不改影响不大

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false  // 不检查JS文件
  }
}

/**
 * 格式化价格，保留两位小数
 * @param {number} price - 原始价格
 * @returns {string} 格式化后的价格字符串
 */
function formatPrice(price) {
  return "$" + price.toFixed(2)
}

/**
 * @typedef {Object} UserProfile
 * @property {string} id - 用户ID
 * @property {string} name - 用户名
 * @property {string} email - 邮箱
 * @property {boolean} [isVip] - 是否VIP（可选）
 */

/**
 * 获取用户信息
 * @param {string} userId 
 * @returns {Promise<UserProfile>}
 */
async function getUserProfile(userId) {
  // ...
}

interface Order {
  id: string
  amount: number
  status: 'pending' | 'completed' | 'cancelled'
}

function processOrder(order: Order) {
  // 类型没问题，但逻辑可能完全错误
  if (order.status === 'cancelled') {
    // ❌ 给用户退款200%？哈哈，类型都对，但这是bug
    refund(order.amount * 2)
  }
}

❌ 错误理解：我有GPS，所以不用学地理
❌ 错误理解：我有计算器，所以不用学数学
❌ 错误理解：我有Cursor，所以不用学编程

✅ 正确理解：我有AI工具，所以能更快地实现想法
✅ 正确理解：我有AI工具，所以能做更有意思的事
✅ 正确理解：我有AI工具，所以能减少重复劳动