vue3怎么更好的使用TypeScript

Vue3 对 TypeScript 的支持更加完善，可以通过以下几个方面来更好地使用 TypeScript：

1. 安装 Vue3 的 TypeScript 类型支持：

npm install --save-dev @vue/compiler-sfc typescript

2. 配置 `tsconfig.json` 文件：

在 `tsconfig.json` 中，需要配置 `compilerOptions` 字段中的以下属性：

- `target`: 目标 ECMAScript 版本，例如 `"es6"`
- `module`: 模块化方式，例如 `"esnext"`
- `strict`: 开启严格类型检查，例如 `"true"`
- `jsx`: 开启 JSX 支持，例如 `"preserve"`
- `allowSyntheticDefaultImports`: 允许默认导入非模块化文件，例如 `"true"`
- `moduleResolution`: 模块解析方式，例如 `"node"`
- `esModuleInterop`: 允许 CommonJS 模块导入时使用 `import` 语法，例如 `"true"`

3. 使用 Vue3 的 TypeScript 类型定义：

在 `.vue` 单文件组件中，可以使用以下方式声明组件的类型：

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

export default defineComponent({
  // ...
});
</script>

4. 使用装饰器：

Vue3 支持使用 `@Component` 装饰器来声明组件。在使用此装饰器时，需要在 `tsconfig.json` 中开启 `experimentalDecorators` 选项。

<script lang="ts">
import { Component, Vue } from 'vue-class-component';

@Component
export default class MyComponent extends Vue {
  // ...
}
</script>

通过以上的方式，可以更好地使用 TypeScript 开发 Vue3 应用程序。