Vue CLI 3 是一个强大的命令行工具，用于快速搭建 Vue.js 项目。它极大地简化了 Vue.js 应用程序的初始设置，提供了丰富的配置选项和自动化工作流。然而，有些用户在创建新项目时可能会发现默认模板并没有集成 TypeScript。TypeScript 是一种静态类型的 JavaScript 超集，它为开发人员提供了更好的类型检查、代码提示和重构支持。
在 Vue CLI 3 中创建项目时，通常有两种方式来引入 TypeScript 支持：
1. **手动添加 TypeScript**: 在初始化项目时，如果选择了 "default" 或 "webpack" 模板，没有预装 TypeScript。此时，你可以通过以下步骤手动添加：
- 确保全局安装了 `typescript` 和 `@vue/cli-plugin-typescript`。
```
npm install -g typescript @vue/cli-plugin-typescript
```
- 进入项目目录，然后运行以下命令安装 TypeScript 插件：
```
vue add typescript
```
- 安装完成后，CLI 将自动修改 `vue.config.js` 文件以启用 TypeScript，并在项目中创建必要的配置文件，如 `tsconfig.json`。
2. **选择预装 TypeScript 的模板**: 如果你希望从一开始就使用 TypeScript，可以在创建项目时选择 "typescript" 模板：
```
vue create my-project --template typescript
```
理解 TypeScript 在 Vue.js 中的应用是至关重要的。当你在 Vue 组件中使用 TypeScript 时，可以声明组件的属性、方法和接口，提高代码的可读性和可维护性。例如，你可以这样定义一个 Vue 组件的 `props`：
```typescript
import Vue from 'vue'
import Component from 'vue-class-component'
@Component({
props: {
message: String
}
})
export default class HelloWorld extends Vue {
message: string
// ...
}
```
此外，TypeScript 还支持装饰器（decorators），如 `@Component`，它可以更直观地定义组件的元数据。
在实际开发中，使用 Vue CLI 3 配合 TypeScript 还需要注意一些最佳实践：
- **配置 `tsconfig.json`**: 根据项目需求调整 TypeScript 编译选项，如模块系统、目标版本等。
- **使用 `.d.ts` 文件**: 为第三方库或自定义模块提供类型定义，以充分利用类型检查。
- **处理异步数据**: 在 Vue 中处理异步数据时，可以使用 `async/await` 语法，但需要确保正确处理返回值类型。
- **类型安全的 Vuex**: 使用 `vuex-module-decorators` 库可以为 Vuex store 创建类型安全的模块。
尽管 Vue CLI 3 默认模板可能不包含 TypeScript，但通过简单的命令行操作，我们就能轻松将 TypeScript 引入到项目中，从而提升项目的质量和开发体验。对于大型项目或者团队协作来说，使用 TypeScript 可以带来显著的优势。
