通过点餐系统的例子教你 TypeScript 的基础使用。
- 基础类型定义
// 基础类型
let price: number = 88; // 数字
let dishName: string = "红烧肉"; // 字符串
let isSpicy: boolean = true; // 布尔值
let orderDate: Date = new Date(); // 日期对象
- 接口定义
// 定义菜品接口
interface MenuItem {
id: number;
name: string;
description: string;
price: number;
sales: number;
check: boolean;
}
// 定义分类接口
interface Category {
id: number;
category: string;
items: MenuItem[];
}
- 使用接口改写现有代码
// 原来的代码
let categories = reactive([{
id: 1,
category: "凉菜",
items: []
}])
// TypeScript版本
let categories = reactive<Category[]>([{
id: 1,
category: "凉菜",
items: []
}])
- 函数类型定义
// 原来的函数
function selectFood(c) {
categories[currentIndex.value].items[c].check = !categories[currentIndex.value].items[c].check
}
// TypeScript版本
function selectFood(index: number): void {
categories[currentIndex.value].items[index].check = !categories[currentIndex.value].items[index].check
}
- Vue组件中使用TypeScript
// 在 setup 中使用
import { ref, computed } from 'vue'
interface Props {
initialCategory?: number;
}
export default defineComponent({
props: {
initialCategory: {
type: Number,
default: 0
}
},
setup(props: Props) {
const currentIndex = ref<number>(0);
const currentChild = ref<Category[]>([]);
// computed 属性
const checkedItemCount = computed((): number[] => {
return categories.map(category =>
category.items.filter(item => item.check).length
);
});
return {
currentIndex,
currentChild,
checkedItemCount
}
}
})
- 数组和对象的类型定义
// 数组类型
const prices: number[] = [88, 66, 128];
const dishNames: string[] = ["红烧肉", "青椒肉丝", "麻婆豆腐"];
// 对象类型
interface OrderDetail {
orderId: string;
dishes: MenuItem[];
totalPrice: number;
createTime: Date;
}
const order: OrderDetail = {
orderId: "ORDER_001",
dishes: [],
totalPrice: 0,
createTime: new Date()
};
- 枚举类型
// 定义菜品状态枚举
enum DishStatus {
Available = "available",
SoldOut = "soldOut",
Hidden = "hidden"
}
// 使用枚举
interface MenuItem {
id: number;
name: string;
status: DishStatus;
}
const dish: MenuItem = {
id: 1,
name: "红烧肉",
status: DishStatus.Available
};
- 类型断言
// 有时候你比TypeScript更了解某个值的类型
const menuElement = document.getElementById('menu') as HTMLDivElement;
// 或者
interface CartItem extends MenuItem {
quantity: number;
}
const cartItem = {
id: 1,
name: "红烧肉",
quantity: 2
} as CartItem;
实际使用建议：
- 先从简单的类型定义开始
- 逐步添加接口定义
- 为主要函数添加参数和返回值类型
- 使用 VS Code 等支持 TypeScript 的编辑器，可以获得更好的代码提示
错误示例：
// ❌ 错误的类型定义
let price: any = 88; // 避免使用 any
// ❌ 类型定义不明确
let items = []; // 应该指定数组元素类型
// ✅ 正确的做法
let price: number = 88;
let items: MenuItem[] = [];
TypeScript 的主要好处是可以在开发时就发现潜在的类型错误，提高代码质量。