让我帮你理解 TypeScript 代码，通过对比来学习：
- 基础类型定义
// 没用 TS 时
let price = 88
let name = '红烧肉'
// 用了 TS 后
let price: number = 88 // 意思是：price 只能是数字
let name: string = '红烧肉' // 意思是：name 只能是字符串
- 对象类型定义
// 没用 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
}
- 数组类型定义
// 没用 TS 时
const prices = [88, 66, 128]
const dishes = ['红烧肉', '青椒肉丝']
// 用了 TS 后
const prices: number[] = [88, 66, 128] // 数组里只能放数字
const dishes: string[] = ['红烧肉', '青椒肉丝'] // 数组里只能放字符串
- 函数类型定义
// 没用 TS 时
function calculateTotal(price, quantity) {
return price * quantity
}
// 用了 TS 后
function calculateTotal(price: number, quantity: number): number {
return price * quantity
}
// 意思是：
// 1. price 必须是数字
// 2. quantity 必须是数字
// 3. 返回值必须是数字
- Vue 组件中的应用
// 没用 TS 时
const count = ref(0)
const message = ref('')
// 用了 TS 后
const count = ref<number>(0) // count 只能是数字
const message = ref<string>('') // message 只能是字符串
- 事件处理
// 没用 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)
}
学习建议：
循序渐进
- 先理解基础类型（string, number, boolean）
- 再学习对象和数组的类型定义
- 最后学习接口和泛型
- 从简单开始
// 第一步：添加基础类型
let price: number = 88
let name: string = '红烧肉'
// 第二步：添加对象类型
interface MenuItem {
name: string
price: number
}
// 第三步：添加数组类型
const menu: MenuItem[] = [
{ name: '红烧肉', price: 88 },
{ name: '青椒肉丝', price: 66 }
]
- 使用 VS Code
- 安装 TypeScript 插件
- 鼠标悬停可以看到类型提示
- 代码补全更智能
- 常见错误理解
// ❌ 错误示例
const price: number = "88" // 错误：字符串不能赋值给数字类型
// ✅ 正确示例
const price: number = 88 // 正确：数字类型
记住：
- TypeScript 主要是帮助我们避免错误
- 类型定义就像是"约定"
- 代码看起来复杂了，但更安全了
- 开发时会有更好的提示
如果你觉得某段代码看不懂，可以：
- 去掉类型声明，看纯 JavaScript 逻辑
- 一点点加入类型，理解每个类型的作用
- 使用 VS Code 的类型提示功能