在 Vue 3 中结合 TypeScript，可以显著提升代码的类型安全性和可维护性。下面是如何在 Vue 3 项目中使用 TypeScript 的详细步骤和示例。

1. 创建 TypeScript Vue 3 项目

使用 Vue CLI 创建一个支持 TypeScript 的 Vue 3 项目：

npm install -g @vue/cli
vue create my-vue-ts-app

在创建过程中，选择 "Manually select features"，然后勾选 "TypeScript"。

2. TypeScript 基本配置

在项目创建完成后，查看 tsconfig.json 文件，确保基本配置合理。以下是一个示例配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

3. 创建 TypeScript 组件

在 src/components 目录下创建一个 TypeScript 组件 HelloWorld.vue：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const message: string = 'Hello, TypeScript with Vue 3!';
</script>

4. 使用 Props 和 Emit

在 TypeScript 中定义组件的 Props 和 Emit 事件可以增强类型安全性。

4.1 定义 Props

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps<{
  title: string;
}>();

// 现在 title 的类型为 string
</script>

4.2 定义 Emit 事件

<template>
  <button @click="handleClick">点击我</button>
</template>

<script lang="ts" setup>
import { defineEmits } from 'vue';

const emit = defineEmits<{
  (e: 'click'): void;
}>();

const handleClick = () => {
  emit('click');
};
</script>

5. Vue Router 和 TypeScript

在使用 Vue Router 时，可以通过 TypeScript 定义路由类型。

5.1 路由类型定义

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

6. Vuex 和 TypeScript

使用 Vuex 时，也可以使用 TypeScript 提高类型安全。

6.1 Vuex Store 定义

import { createStore } from 'vuex';

interface State {
  count: number;
}

const store = createStore<State>({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
  },
});

export default store;

7. 类型声明文件

对于一些外部库或自定义模块，可以创建 .d.ts 文件来定义类型。

7.1 创建声明文件

在 src 目录下创建 shims-vue.d.ts 文件：

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

8. 总结

通过结合 TypeScript 和 Vue 3，可以提升代码的类型安全性和可维护性。使用 TypeScript 的类型定义、Props、Emit 以及 Vuex 和 Vue Router 的类型增强，能够有效减少运行时错误，提高开发效率。这使得团队协作和代码维护变得更加轻松。