第四阶段：Vue 进阶与生态整合（第 55 天）(Vue TypeScript 整合：提升代码的类型安全性)

Vue与TypeScript整合：提升类型安全性与可维护性

核心优势

项目创建

通过 Vue CLI 创建支持 TypeScript 的项目：

vue create my-project
# 选择 "Manually select features" → 勾选 TypeScript

核心语法实践

1. 组件定义 (defineComponent)

import { defineComponent } from 'vue';

export default defineComponent({
name: 'TypeSafeComponent',
// 类型推导由此开始
});

2. Props 类型定义

import { PropType } from 'vue';

interface User {
id: number;
name: string;
}

export default defineComponent({
props: {
// 基础类型
count: {
type: Number,
required: true
},
// 复杂对象
userInfo: {
type: Object as PropType<User>,
default: () => ({ id: 0, name: 'Guest' })
}
}
});

3. 状态类型约束

interface State {
loading: boolean;
data: string[];
}

export default defineComponent({
data(): State {
return {
loading: false,
data: []
};
}
});

4. 方法类型标注

methods: {
fetchData(url: string): Promise<string[]> {
return axios.get(url).then(res => res.data);
}
}

完整组件示例

import { defineComponent, PropType } from 'vue';

interface Product {
id: number;
title: string;
price: number;
}

export default defineComponent({
props: {
products: {
type: Array as PropType<Product[]>,
default: () => []
}
},
data() {
return {
discountRate: 0.8 as number
};
},
computed: {
discountedPrices(): Map<number, number> {
return new Map(
this.products.map(p => [p.id, p.price * this.discountRate])
);
}
},
methods: {
applyDiscount(price: number): string {
return `¥${(price * this.discountRate).toFixed(2)}`;
}
}
});

类型安全实践要点

总结

最佳实践：对超过 3 个字段的对象必定义接口，公共组件必须声明精确的 PropType