TypeScript 的基础使用

通过点餐系统的例子教你 TypeScript 的基础使用。

1. 基础类型定义

// 基础类型
let price: number = 88;  // 数字
let dishName: string = "红烧肉";  // 字符串
let isSpicy: boolean = true;  // 布尔值
let orderDate: Date = new Date();  // 日期对象

1. 接口定义

// 定义菜品接口
interface MenuItem {
    id: number;
    name: string;
    description: string;
    price: number;
    sales: number;
    check: boolean;
}

// 定义分类接口
interface Category {
    id: number;
    category: string;
    items: MenuItem[];
}

1. 使用接口改写现有代码

// 原来的代码
let categories = reactive([{
    id: 1,
    category: "凉菜",
    items: []
}])

// TypeScript版本
let categories = reactive<Category[]>([{
    id: 1,
    category: "凉菜",
    items: []
}])

1. 函数类型定义

// 原来的函数
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
}

1. 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
        }
    }
})

1. 数组和对象的类型定义

// 数组类型
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()
};

1. 枚举类型

// 定义菜品状态枚举
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
};

1. 类型断言

// 有时候你比TypeScript更了解某个值的类型
const menuElement = document.getElementById('menu') as HTMLDivElement;

// 或者
interface CartItem extends MenuItem {
    quantity: number;
}

const cartItem = {
    id: 1,
    name: "红烧肉",
    quantity: 2
} as CartItem;

实际使用建议：

1. 先从简单的类型定义开始
2. 逐步添加接口定义
3. 为主要函数添加参数和返回值类型
4. 使用 VS Code 等支持 TypeScript 的编辑器，可以获得更好的代码提示

错误示例：

// ❌ 错误的类型定义
let price: any = 88;  // 避免使用 any

// ❌ 类型定义不明确
let items = [];  // 应该指定数组元素类型

// ✅ 正确的做法
let price: number = 88;
let items: MenuItem[] = [];

TypeScript 的主要好处是可以在开发时就发现潜在的类型错误，提高代码质量。