使用了typescript后代码看不懂怎么办

让我帮你理解 TypeScript 代码，通过对比来学习：

1. 基础类型定义

// 没用 TS 时
let price = 88
let name = '红烧肉'

// 用了 TS 后
let price: number = 88         // 意思是：price 只能是数字
let name: string = '红烧肉'    // 意思是：name 只能是字符串

1. 对象类型定义

// 没用 TS 时
const dish = {
    name: '红烧肉',
    price: 88,
    isSpicy: true
}

// 用了 TS 后
interface Dish {              // interface 相当于定义一个"模板"
    name: string;            // 规定 name 必须是字符串
    price: number;          // 规定 price 必须是数字
    isSpicy: boolean;      // 规定 isSpicy 必须是布尔值
}

const dish: Dish = {        // 告诉 TS：这个对象必须符合 Dish 的格式
    name: '红烧肉',
    price: 88,
    isSpicy: true
}

1. 数组类型定义

// 没用 TS 时
const prices = [88, 66, 128]
const dishes = ['红烧肉', '青椒肉丝']

// 用了 TS 后
const prices: number[] = [88, 66, 128]     // 数组里只能放数字
const dishes: string[] = ['红烧肉', '青椒肉丝']  // 数组里只能放字符串

1. 函数类型定义

// 没用 TS 时
function calculateTotal(price, quantity) {
    return price * quantity
}

// 用了 TS 后
function calculateTotal(price: number, quantity: number): number {
    return price * quantity
}
// 意思是：
// 1. price 必须是数字
// 2. quantity 必须是数字
// 3. 返回值必须是数字

1. Vue 组件中的应用

// 没用 TS 时
const count = ref(0)
const message = ref('')

// 用了 TS 后
const count = ref<number>(0)      // count 只能是数字
const message = ref<string>('')   // message 只能是字符串

1. 事件处理

// 没用 TS 时
function handleClick(event) {
    console.log(event.target.value)
}

// 用了 TS 后
function handleClick(event: MouseEvent): void {
    const target = event.target as HTMLInputElement  // 告诉 TS：这是一个输入框
    console.log(target.value)
}

学习建议：

1. 循序渐进

   • 先理解基础类型（string, number, boolean）
   • 再学习对象和数组的类型定义
   • 最后学习接口和泛型
2. 从简单开始

// 第一步：添加基础类型
let price: number = 88
let name: string = '红烧肉'

// 第二步：添加对象类型
interface MenuItem {
    name: string
    price: number
}

// 第三步：添加数组类型
const menu: MenuItem[] = [
    { name: '红烧肉', price: 88 },
    { name: '青椒肉丝', price: 66 }
]

1. 使用 VS Code

• 安装 TypeScript 插件
• 鼠标悬停可以看到类型提示
• 代码补全更智能

1. 常见错误理解

// ❌ 错误示例
const price: number = "88"  // 错误：字符串不能赋值给数字类型

// ✅ 正确示例
const price: number = 88    // 正确：数字类型

记住：

• TypeScript 主要是帮助我们避免错误
• 类型定义就像是"约定"
• 代码看起来复杂了，但更安全了
• 开发时会有更好的提示

如果你觉得某段代码看不懂，可以：

1. 去掉类型声明，看纯 JavaScript 逻辑
2. 一点点加入类型，理解每个类型的作用
3. 使用 VS Code 的类型提示功能