Vue与TypeScript #

npm install -D typescript

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

// env.d.ts
/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

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

// 带类型的ref
const count = ref<number>(0)

// 带类型的computed
const doubled = computed<number>(() => count.value * 2)

// 普通变量自动推断
const title = 'Hello TypeScript'

function increment(): void {
  count.value++
}
</script>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue'

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

export default defineComponent({
  props: {
    user: {
      type: Object as PropType<User>,
      required: true
    }
  },
  
  setup(props) {
    const count = ref<number>(0)
    
    function increment(): void {
      count.value++
    }
    
    return {
      count,
      increment
    }
  }
})
</script>

<script setup lang="ts">
defineProps<{
  title: string
  count?: number
  disabled?: boolean
}>()
</script>

<script setup lang="ts">
interface Props {
  title: string
  count?: number
  disabled?: boolean
}

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

<script setup lang="ts">
interface User {
  id: number
  name: string
  email: string
}

interface Props {
  user: User
  users: User[]
  callback: (id: number) => void
}

defineProps<Props>()
</script>

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

interface User {
  id: number
  name: string
}

export default defineComponent({
  props: {
    user: {
      type: Object as PropType<User>,
      required: true
    },
    users: {
      type: Array as PropType<User[]>,
      default: () => []
    },
    status: {
      type: String as PropType<'active' | 'inactive'>,
      default: 'active'
    }
  }
})
</script>

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

const emit = defineEmits<Emits>()

function handleUpdate() {
  emit('update', 'new value')
}

function handleDelete() {
  emit('delete', 1)
}
</script>

<script setup lang="ts">
const emit = defineEmits<{
  update: [value: string]
  delete: [id: number]
  change: [event: Event]
}>()

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

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

// 显式类型
const count: Ref<number> = ref(0)
const name = ref<string>('张三')

// 类型推断
const message = ref('Hello')  // Ref<string>

// 复杂类型
interface User {
  id: number
  name: string
}

const user = ref<User | null>(null)
const users = ref<User[]>([])
</script>

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

interface State {
  count: number
  name: string
  loading: boolean
}

const state = reactive<State>({
  count: 0,
  name: '',
  loading: false
})

// 类型推断
const state2 = reactive({
  count: 0,      // number
  name: ''       // string
})
</script>

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

const count = ref(0)

// 自动推断
const doubled = computed(() => count.value * 2)  // ComputedRef<number>

// 显式类型
const formatted = computed<string>(() => {
  return `Count: ${count.value}`
})
</script>

// composables/useUser.ts
import { ref, computed, type Ref, type ComputedRef } from 'vue'

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

interface UseUserReturn {
  user: Ref<User | null>
  loading: Ref<boolean>
  error: Ref<Error | null>
  isLoggedIn: ComputedRef<boolean>
  login: (credentials: { email: string; password: string }) => Promise<void>
  logout: () => void
}

export function useUser(): UseUserReturn {
  const user = ref<User | null>(null)
  const loading = ref(false)
  const error = ref<Error | null>(null)
  
  const isLoggedIn = computed(() => !!user.value)
  
  async function login(credentials: { email: string; password: string }): Promise<void> {
    loading.value = true
    error.value = null
    
    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(credentials)
      })
      user.value = await response.json()
    } catch (e) {
      error.value = e as Error
    } finally {
      loading.value = false
    }
  }
  
  function logout(): void {
    user.value = null
  }
  
  return {
    user,
    loading,
    error,
    isLoggedIn,
    login,
    logout
  }
}

<script setup lang="ts">
import { useUser } from '@/composables/useUser'

const { user, loading, isLoggedIn, login } = useUser()

async function handleLogin() {
  await login({
    email: 'test@example.com',
    password: 'password'
  })
}
</script>

<template>
  <input ref="inputRef">
</template>

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

const inputRef = ref<HTMLInputElement | null>(null)

onMounted(() => {
  inputRef.value?.focus()
})
</script>

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

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

// 获取组件暴露的类型
type MyComponentExpose = InstanceType<typeof MyComponent>

const componentRef = ref<MyComponentExpose | null>(null)

function callMethod() {
  componentRef.value?.someMethod()
}
</script>

// utils/request.ts
interface RequestConfig {
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
  headers?: Record<string, string>
  body?: any
}

interface ApiResponse<T> {
  data: T
  message: string
  code: number
}

export async function request<T>(
  url: string,
  config: RequestConfig = {}
): Promise<ApiResponse<T>> {
  const response = await fetch(url, {
    method: config.method || 'GET',
    headers: {
      'Content-Type': 'application/json',
      ...config.headers
    },
    body: config.body ? JSON.stringify(config.body) : undefined
  })
  
  return response.json()
}

// 使用
interface User {
  id: number
  name: string
}

const result = await request<User>('/api/user/1')
console.log(result.data.name)

// api/user.ts
import { request } from '@/utils/request'

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

export interface LoginParams {
  email: string
  password: string
}

export interface LoginResult {
  token: string
  user: User
}

export const userApi = {
  async getUser(id: number): Promise<User> {
    const res = await request<User>(`/api/users/${id}`)
    return res.data
  },
  
  async login(params: LoginParams): Promise<LoginResult> {
    const res = await request<LoginResult>('/api/login', {
      method: 'POST',
      body: params
    })
    return res.data
  },
  
  async updateUser(id: number, data: Partial<User>): Promise<User> {
    const res = await request<User>(`/api/users/${id}`, {
      method: 'PUT',
      body: data
    })
    return res.data
  }
}