本文主要探讨Vue3中与TypeScript的基本使用。
是什么？
是在单文件组件（SFC）中使用Composition API的编译时语法糖。当我们在写作本文时，所使用的Vue版本是3.2.26。
让我们看看vue3的发展历程：
早期版本的Vue3（3.0.0-beta.21之前）对Composition API的支持只能在组件选项的setup函数中使用。而在3.0.0-beta.21版本中，添加了的实验特性。到了3.2.0版本，移除的实验状态，正式成为框架稳定的特性之一。
与组件选项setup函数对比，的优点：
1. 代码更少、更简洁，无需使用return {}变量和方法，使用组件时无需主动注册。
2. 更好的运行性能。
也有其缺点，比如需要学习额外的API。
那么，怎么使用呢？与TypeScript如何结合？
在Vue3的单文件组件（SFC）中，如果需要使用TypeScript，则在代码块上添加lang属性并赋值为ts，例如：。这样，该脚本块中的代码会被编译成TypeScript代码。
块中的脚本会被编译成组件选项的setup函数的内容，也就是说它会在每次组件实例被创建的时候执行。
注意事项：
1. 每个.vue文件最多可同时包含一个块（不包括）和一个块（不包括常规的）。
2. 编译器宏如defineProps、defineEmits、withDefaults、defineExpose等，只能在块中使用，无需导入，并在处理块时被一同编译掉。这些宏必须用在的顶层，不能在局部变量中引用。
关于TypeScript的写法，从代码中可以发现props没有定义默认值。而Vue3为我们提供了withDefaults这个编译器宏，可以给props提供默认值。和组件选项一样，不要定义和props的属性同名的顶层变量。
在中常用的辅助函数hooks api，主要有useAttrs、useSlots、useCssModule等。其中，useAttrs函数用于获取attrs数据，useSlots函数用于获取插槽数据。而在模板中，则可以使用$attrs来访问attrs数据，$slots来访问slots数据。
对于CSS Modules的支持，Vue3允许我们在标签上增加module属性，即。这个代码块会被编译为CSS Modules，并将生成的CSS类作为$style对象的键给组件。
关于组件的注册，在中，组件不需要再注册，模板可以直接使用，相当于一个顶层变量。但是要注意，是没有组件配置项name的，如果需要设置name，可以再使用一个普通的来配置。
中可以使用顶层await，结果代码会被编译成async setup()。但是要注意，async setup()必须与Suspense组合使用，目前Suspense还是实验阶段的特性，其API可能随时发生变动，建议暂时不要使用。
vue3中还支持点语法来使用挂载在一个对象上的组件。当从单个文件中导入多个组件时，可以使用命名空间组件。Vue3的标签可以通过v-bind这一CSS函数将CSS的值关联到动态的组件状态上。
关于全局指令、自定义指令以及导入的指令等更多内容，建议参考官方文档。