如何在 Vue 中使用 TypeScript？

介绍如何将 TypeScript 集成到 Vue 项目中的步骤，包括工具安装、配置文件设置和组件编写方法。

TypeScript 中等 Vue Vue.js

在 Vue 项目中应用 TypeScript，可以通过以下结构化步骤实现，这些步骤基于 Vue 生态和行业标准的最佳实践：

创建 Vue 项目并集成 TypeScript：
- 安装 Vue CLI（如果未安装）：
```
npm install -g @vue/cli
```
- 使用 Vue CLI 创建新项目并选择 TypeScript 支持：
```
vue create my-vue-ts-app
```
  在配置选项中，选择”Manually select features”，然后勾选 TypeScript 功能。

配置 TypeScript 环境：

项目创建后会生成 tsconfig.json，用户可根据需求调整编译器选项：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

建议设置 strict: true 以开启严格类型检查。

安装额外依赖：
- 安装 Vue 和 TypeScript 的类型定义确保兼容性：
```
npm install --save-dev @types/node @types/vue  
```
  Vue CLI 项目可能已自带相关依赖；手动集成项目可使用 @vue/cli-plugin-typescript。

编写 Vue 组件：

在.vue 文件中，使用 <script lang=”ts”> 声明 TypeScript：

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

export default defineComponent({
  setup() {
    const message = ref<string>('Hello World');
    return { message };
  }
});
</script>

defineComponent() 方法提供更好的类型推论和 IDE 支持。

高级类型定义：

利用接口和泛型增强类型安全：

interface User {
  id: number;
  name: string;
}
const user = ref<User>({ id: 1, name: 'John' });

对于 Props，使用 PropType：

export default defineComponent({
  props: {
    title: {
      type: String as PropType<string>,
      required: true
    }
  }
});

这可在编译时捕获错误提升可维护性。

处理和性能优化：
- 使用 vue-tsc 进行类型检查和构建：
```
npm install -g vue-tsc && vue-tsc --noEmit
```
  - 对模块划分优化编译性能，将常见类型抽取到 d.ts 文件；
  - 避免 excessive explicit casting 减少编译开销。

这些步骤结合了 Vue 3 的组合式 API（Composition API）和 TypeScript 的最佳实践以显著提升代码质量。