vue3 使用typescript小结

在Vue 3中使用TypeScript可以带来类型安全的好处，以下是一些关键步骤和示例代码：

1. 确保你的项目使用了Vue 3和TypeScript。
2. 在<script setup>标签中使用TypeScript时，需要确保你的Vite配置正确地处理了.ts文件。
3. 在vite.config.ts中配置TypeScript插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import typescript from '@rollup/plugin-typescript'
 
export default defineConfig({
  plugins: [vue(), typescript()],
})

4. 在组件中使用TypeScript：

<script setup lang="ts">
import { ref } from 'vue'
 
const count = ref<number>(0)
</script>
 
<template>
  <button @click="count++">{{ count }}</button>
</template>

5. 定义Props和Emits接口：

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
 
interface Props {
  msg: string
}
 
const props = defineProps<Props>()
 
const emit = defineEmits(['update'])
</script>
 
<template>
  <div>{{ props.msg }}</div>
  <button @click="$emit('update')">Update</button>
</template>

6. 使用Class API时，定义组件类：

<script lang="ts">
import { defineComponent, ref } from 'vue'
 
export default defineComponent({
  setup() {
    const count = ref<number>(0)
    return { count }
  }
})
</script>
 
<template>
  <button @click="count++">{{ count }}</button>
</template>

7. 在tsconfig.json中配置TypeScript编译选项，确保Vue 3的类型定义可以被正确识别。
8. 使用TypeScript的工具函数进行状态管理和其他逻辑。

总结，在Vue 3中使用TypeScript主要是通过配置Vite或Webpack等构建工具，并在组件中使用TypeScript语法来实现类型检查和代码提示。这有助于在开发过程中捕获类型错误，从而减少运行时的错误和提高代码质量。