vue3如何于TypeScript一起使用
Vue 3 对 TypeScript 的支持非常友好，结合 TypeScript 可以提供更好的类型检查和开发体验。以下是 Vue 3 与 TypeScript 一起使用的详细指南，包括 <script setup> 的用法。
- 创建 Vue 3 + TypeScript 项目
使用 Vue CLI 或 Vite 创建一个支持 TypeScript 的 Vue 3 项目。
使用 Vite 创建项目
npm create vite@latest my-vue-app --template vue-ts
使用 Vue CLI 创建项目
vue create my-vue-app
# 选择 "Manually select features"，然后勾选 TypeScript。
- 项目结构
创建的项目会包含以下文件：
-
src/main.ts：入口文件。 -
src/App.vue：根组件。 -
src/components/HelloWorld.vue：示例组件。 -
tsconfig.json：TypeScript 配置文件。
- 在
<script setup>中使用 TypeScript
在 Vue 3 中，可以通过 <script setup lang="ts"> 直接使用 TypeScript。
<script setup lang="ts">
import { ref } from 'vue';
// 定义响应式数据
const count = ref<number>(0);
// 定义函数
function increment() {
count.value++;
}
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
- 定义 Props 和 Emits
在 <script setup> 中，可以使用 defineProps 和 defineEmits 来定义组件的 Props 和 Emits，并为其添加类型。
<script setup lang="ts">
// 定义 Props 类型
interface Props {
title: string;
count?: number; // 可选属性
}
// 使用 defineProps
const props = defineProps<Props>();
</script>
<template>
<div>
<h1>{{ title }}</h1>
<p>Count: {{ count || 0 }}</p>
</div>
</template>
<script setup lang="ts">
// 定义 Emits 类型
interface Emits {
(event: 'update:count', value: number): void;
}
// 使用 defineEmits
const emit = defineEmits<Emits>();
function updateCount() {
emit('update:count', 10); // 触发事件
}
</script>
<template>
<button @click="updateCount">Update Count</button>
</template>
- 使用泛型定义 Ref 和 Reactive
在 TypeScript 中，可以为 ref 和 reactive 指定类型。
<script setup lang="ts">
import { ref, reactive } from 'vue';
// 定义 Ref 类型
const count = ref<number>(0);
// 定义 Reactive 类型
interface User {
name: string;
age: number;
}
const user = reactive<User>({
name: 'Alice',
age: 25,
});
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<p>User: {{ user.name }}, {{ user.age }}</p>
</div>
</template>
- 使用 Composables 和 TypeScript
Composables 是 Vue 3 的组合式函数，可以结合 TypeScript 提供更好的类型支持。
// useCounter.ts
import { ref } from 'vue';
export function useCounter(initialValue: number = 0) {
const count = ref<number>(initialValue);
function increment() {
count.value++;
}
return {
count,
increment,
};
}
在组件中使用 Composable
<script setup lang="ts">
import { useCounter } from './useCounter';
const { count, increment } = useCounter(10);
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
- 类型推断与类型声明
Vue 3 的 Composition API 对 TypeScript 的类型推断非常友好。以下是一些常见的类型声明场景：
<script setup lang="ts">
// 为事件处理函数添加类型
function handleClick(event: MouseEvent) {
console.log('Clicked at:', event.clientX, event.clientY);
}
</script>
<template>
<button @click="handleClick">Click Me</button>
</template>
<script setup lang="ts">
// 为组件实例添加类型
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';
const myComponentRef = ref<InstanceType<typeof MyComponent>>();
</script>
<template>
<MyComponent ref="myComponentRef" />
</template>
- 配置
tsconfig.json
Vue 3 项目默认会生成一个 tsconfig.json 文件，以下是一些常见的配置项：
{
"compilerOptions": {
"target": "esnext", // 编译目标版本
"module": "esnext", // 模块系统
"strict": true, // 启用严格类型检查
"jsx": "preserve", // 支持 JSX
"moduleResolution": "node", // 模块解析策略
"esModuleInterop": true, // 支持 CommonJS 模块
"skipLibCheck": true, // 跳过库文件的类型检查
"forceConsistentCasingInFileNames": true // 强制文件名大小写一致
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
总结
-
Vue 3 与 TypeScript 结合使用非常简单，只需在
<script setup>中添加lang="ts"。 -
使用
defineProps和defineEmits为组件添加类型。 -
通过泛型为
ref和reactive指定类型。 -
使用 Composables 和工具库（如 Vue Router、Pinia）时，TypeScript 也能提供完整的类型支持。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
