Vue3 TypeScript

项目配置

yarn create vite my-vue-app --template vue-ts

组件类型

defineComponent

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MyComponent',
  props: {
    message: String
  },
  setup(props) {
    console.log(props.message)
  }
})

script setup

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

const count = ref<number>(0)
const message = ref<string>('Hello')
</script>

Props 类型

基本类型

<script setup lang="ts">
interface Props {
  message: string
  count?: number
  tags: string[]
  callback: (id: number) => void
}

const props = defineProps<Props>()

// 带默认值
const props = withDefaults(defineProps<Props>(), {
  count: 0,
  tags: () => []
})
</script>

复杂类型

interface User {
  id: number
  name: string
  email: string
}

interface Props {
  user: User
  users: User[]
}

const props = defineProps<Props>()

Emits 类型

<script setup lang="ts">
interface Emits {
  (e: 'update', value: string): void
  (e: 'delete', id: number): void
}

const emit = defineEmits<Emits>()

emit('update', 'new value')
emit('delete', 123)
</script>

Ref 类型

import { ref, Ref } from 'vue'

const count = ref<number>(0)
const message: Ref<string> = ref('Hello')

// DOM 引用
const inputRef = ref<HTMLInputElement | null>(null)

// 组件引用
import MyComponent from './MyComponent.vue'
const compRef = ref<InstanceType<typeof MyComponent> | null>(null)

Reactive 类型

import { reactive } from 'vue'

interface State {
  count: number
  message: string
}

const state = reactive<State>({
  count: 0,
  message: 'Hello'
})

Computed 类型

import { ref, computed } from 'vue'

const count = ref(0)

// 自动推断类型
const double = computed(() => count.value * 2)

// 显式类型
const double = computed<number>(() => count.value * 2)

组合式函数类型

import { ref, Ref } from 'vue'

interface UseMouse {
  x: Ref<number>
  y: Ref<number>
}

export function useMouse(): UseMouse {
  const x = ref(0)
  const y = ref(0)

  // ...

  return { x, y }
}

组件实例类型

<script setup lang="ts">
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'

const compRef = ref<InstanceType<typeof MyComponent>>()
</script>

<template>
  <MyComponent ref="compRef" />
</template>

全局属性类型

// main.ts
const app = createApp(App)
app.config.globalProperties.$http = axios

// 类型声明
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $http: typeof axios
  }
}

Router 类型

import { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: Home
  }
]

// 路由元信息
declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    roles?: string[]
  }
}

Pinia 类型

import { defineStore } from 'pinia'

interface State {
  count: number
  name: string
}

export const useCounterStore = defineStore('counter', {
  state: (): State => ({
    count: 0,
    name: 'Counter'
  }),
  getters: {
    doubleCount: (state): number => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

JSX/TSX

import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    
    return () => (
      <div>
        <p>{count.value}</p>
        <button onClick={() => count.value++}>+1</button>
      </div>
    )
  }
})