Vue 3 中 TypeScript 的使用详解：类型声明、API 支持和类型推断

Vue 3 在开发过程中会用到 TypeScript（简称 TS），以提供更好的类型检查和智能感知功能。下面是 Vue 3 中使用 TypeScript 的几个主要方面：

类型声明：Vue 3 中的代码可以使用 TypeScript 进行类型声明，以提供更严格的类型检查。你可以为组件的 props、data、computed 等属性声明其类型，并在编译过程中捕获潜在的类型错误。
选项式 API：Vue 3 引入了一种新的组件编写方式，即选项式 API。使用 TypeScript 可以更好地支持这种 API，因为你可以为每个选项声明正确的类型，从而获得更好的智能感知和类型检查。
Composition API：Vue 3 还引入了 Composition API，这是一种更灵活的组件组织方式。使用 TypeScript 可以更好地支持 Composition API，因为你可以为自定义的函数提供正确的类型声明，并享受 TypeScript 的智能感知和类型检查。
类型推断：Vue 3 中的很多特性都可以通过 TypeScript 进行类型推断。比如，使用 ref 函数创建响应式数据时，TypeScript 可以自动推断出数据的类型。这可以帮助你避免手动声明类型，提高开发效率。

使用 TypeScript 开发 Vue 3 的步骤如下：

安装 TypeScript：首先，你需要安装 TypeScript。可以使用 npm 或者 yarn 运行以下命令进行安装：

npm install --save-dev typescript

创建 TypeScript 配置文件：在项目根目录下，创建一个名为 'tsconfig.json' 的文件，用于配置 TypeScript。可以使用以下命令创建一个基本的配置文件：

npx tsc --init

配置 Vue 文件支持：在 'tsconfig.json' 文件中，确保以下配置项被启用：

"compilerOptions": {
  "module": "ESNext",
  "jsx": "preserve",
  "allowSyntheticDefaultImports": true,
  "esModuleInterop": true
},
"include": [
  "src/**/*.ts",
  "src/**/*.tsx",
  "src/**/*.vue",
  "tests/**/*.ts",
  "tests/**/*.tsx"
]

创建 Vue 组件：在 Vue 组件中，你可以使用 TypeScript 进行类型声明。例如，你可以为 props 定义类型，并使用泛型推断来声明 data 的类型。
启动开发服务器：运行开发服务器时，TypeScript 会自动进行类型检查，并在有错误时给出提示。你可以使用以下命令启动开发服务器：

npm run serve

通过以上步骤，你就可以使用 TypeScript 开发 Vue 3 项目了，并享受其提供的类型检查和智能感知功能。