在Vue中使用TypeScript的几种方式

<template>
  <div>{{ message }}</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  data() {
    return {
      message: 'Hello TypeScript!' as string
    }
  },
  methods: {
    greet(name: string): string {
      return `Hello, ${name}!`
    }
  }
})
</script>

<template>
  <div>{{ message }}</div>
  <button @click="increment">Count: {{ count }}</button>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 类型推断
const count = ref(0) // 自动推断为 Ref<number>
const message = ref('Hello') // 自动推断为 Ref<string>

// 显式类型声明
const user = ref<{ name: string; age: number }>({
  name: 'John',
  age: 25
})

// 类型化的函数
const increment = (amount: number = 1): void => {
  count.value += amount
}

// 计算属性自动推断类型
const doubleCount = computed(() => count.value * 2)
</script>

<template>
  <div>{{ title }} - {{ count }}</div>
</template>

<script setup lang="ts">
interface Props {
  title: string
  count?: number
  items: string[]
}

const props = withDefaults(defineProps<Props>(), {
  count: 0
})
</script>

<script setup lang="ts">
// 定义 emits 的类型
const emit = defineEmits<{
  (e: 'update', value: number): void
  (e: 'submit', data: { name: string; age: number }): void
}>()

const handleClick = () => {
  emit('update', 10)
  emit('submit', { name: 'John', age: 25 })
}
</script>

npm install -D typescript @vue/tsconfig @vue/runtime-dom
# 或
yarn add -D typescript @vue/tsconfig @vue/runtime-dom

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

/// <reference types="vite/client" />
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}