【TS】工具类型实战：vue3“类型安全”

1
// types/user.ts：用户信息结构
2
export interface UserFormState {
3
  name: string
4
  age: number
5
  address: {
6
    street: string
7
    city: string
8
    zipCode: string
9
  }
10
}
11

12
// utils/type-utils.ts：深层可选工具类型
13
export type DeepPartial<T extends object> = {
14
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K]
15
}

1
// utils/type-utils.ts：部分可选工具类型
2
export type MarkPropsAsOptional<
3
  T extends object,
4
  K extends keyof T = keyof T
5
> = Partial<Pick<T, K>> & Omit<T, K>

1
// utils/type-utils.ts：基于值类型的Pick工具类型
2
type Func = (...args: any[]) => any
3
export type PickByValueType<T extends object, ValueType> = Pick<
4
  T,
5
  { [K in keyof T]: T[K] extends ValueType ? K : never }[keyof T]
6
>

1
// types/table.ts：表格Props结构
2
export interface DataTableProps {
3
  data: any[]
4
  columns: string[]
5
  onRowClick: (row: any) => void // 行点击回调（函数类型）
6
  onPageChange: (page: number) => void // 分页回调（函数类型）
7
  bordered: boolean // 非函数类型
8
}

1
<script setup lang="ts">
2
import { defineProps, computed } from 'vue'
3
import type { DataTableProps, PickByValueType } from './types/table'
4
import type { Func } from '../utils/type-utils'
5

6
// 🔧 提取所有函数类型的Props（事件回调）
7
type TableEvents = PickByValueType<DataTableProps, Func>
8

9
// 📝 组件Props：仅接受事件回调
10
const props = defineProps<TableEvents>()
11

12
// 🎯 计算属性：处理行点击逻辑
13
const handleRowClick = computed(() => (row: any) => {
14
  console.log('行点击:', row)
15
  props.onRowClick?.(row)
16
})
17
</script>
18

19
<template>
20
  <div class="data-table">
21
    <div class="table-header">
22
      <div
23
        v-for="col in columns"
24
        :key="col">
25
        {{ col }}
26
      </div>
27
    </div>
28
    <div class="table-body">
29
      <div
30
        v-for="row in data"
31
        :key="row.id"
32
        class="table-row"
33
        @click="handleRowClick(row)">
34
        <div
35
          v-for="col in columns"
36
          :key="col">
37
          {{ row[col] }}
38
        </div>
39
      </div>
40
    </div>
41
    <div class="table-pagination">
42
      <button @click="onPageChange(1)">第一页</button>
43
      <button @click="onPageChange(2)">第二页</button>
44
    </div>
45
  </div>
46
</template>

1
// utils/type-utils.ts：互斥工具类型
2
export type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never }
3
export type XOR<T, U> = (Without<T, U> & U) | (Without<U, T> & T)

1
// types/button.ts：按钮Props结构
2
export interface PrimaryBtnProps {
3
  type: 'primary'
4
  primaryColor: string
5
}
6

7
export interface SecondaryBtnProps {
8
  type: 'secondary'
9
  secondaryColor: string
10
}
11

12
// 🔧 互斥约束：只能是Primary或Secondary
13
export type BtnProps = XOR<PrimaryBtnProps, SecondaryBtnProps>

1
<script setup lang="ts">
2
import { defineProps, computed } from 'vue'
3
import type { BtnProps } from './types/button'
4

5
// 📝 组件Props：互斥约束
6
const props = defineProps<BtnProps>()
7

8
// 🎯 计算属性：根据类型设置样式
9
const btnStyle = computed(() => ({
10
  backgroundColor:
11
    props.type === 'primary' ? props.primaryColor : props.secondaryColor,
12
  color: '#fff',
13
  padding: '8px 16px',
14
  border: 'none',
15
  borderRadius: '4px',
16
  cursor: 'pointer',
17
}))
18
</script>
19

20
<template>
21
  <button
22
    class="btn"
23
    :style="btnStyle"
24
    @click="$emit('click')">
25
    <slot></slot>
26
  </button>
27
</template>

1
<!-- ✅ 正确：Primary按钮 -->
2
<Btn type="primary" primary-color="#007bff">提交</Btn>
3

4
<!-- ✅ 正确：Secondary按钮 -->
5
<Btn type="secondary" secondary-color="#6c757d">取消</Btn>
6

7
<!-- ❌ 错误：同时包含primary和secondary属性 -->
8
<Btn type="primary" secondary-color="#6c757d">错误示例</Btn>

1
// utils/type-utils.ts：对象交集工具类型
2
export type ObjectIntersection<T extends object, U extends object> = Pick<
3
  T,
4
  { [K in keyof T]: K extends keyof U ? K : never }[keyof T]
5
>

1
// types/user.ts：用户信息结构
2
export interface User {
3
  userId: number
4
  name: string
5
  email: string
6
}
7

8
// types/order.ts：订单信息结构
9
export interface Order {
10
  orderId: number
11
  userId: number
12
  amount: number
13
}

1
<script setup lang="ts">
2
import { defineProps } from 'vue'
3
import type { User, Order, ObjectIntersection } from './types'
4

5
// 🔧 提取User和Order的共同字段（仅userId）
6
type CommonFields = ObjectIntersection<User, Order>
7

8
// 📝 组件Props：接受共同字段
9
const props = defineProps<CommonFields>()
10
</script>
11

12
<template>
13
  <div class="user-order-detail">
14
    <h3>用户ID：{{ userId }}</h3>
15
    <div class="user-info">
16
      <p>姓名：{{ name }}</p>
17
      <p>邮箱：{{ email }}</p>
18
    </div>
19
    <div class="order-info">
20
      <p>订单ID：{{ orderId }}</p>
21
      <p>订单金额：{{ amount }}</p>
22
    </div>
23
  </div>
24
</template>