{
  "compilerOptions": {
    "target": "ESNext",
    "strict": true,
    "moduleResolution": "node",
    "types": [[28](vue)],
    "baseUrl": ".",
    "paths": { "@/*": [[27](src/*)] },
    "jsxImportSource": "vue" // 仅 TSX 项目需要
  },
  "include": [[29](src/**/*.ts)][[30](src/**/*.d.ts)][[31](src/**/*.tsx)][[32](src/**/*.vue)]
}

import type { User } from '@/types'

// 定义用户属性接口
interface UserProps {
  id: number
  name: string
  age?: number // 可选属性
  tags?: string[]
}

// 声明 props 类型并设置默认值
const props = defineProps<UserProps>()

// 解构 props 并保持响应性（Vue 3.5 Reactive Props 解构支持）
const { name, age } = defineProps<UserProps>()

import type { BaseProps } from '@/types'

// 交叉类型合并基础属性与组件特有属性
defineProps<BaseProps & { extraProp?: string }>()
```[[22](https://blog.csdn.net/u012384510/article/details/130633615)]


##### 事件类型声明

通过 `defineEmits<T>()` 标注事件类型，确保 `emit` 调用时参数类型与声明一致。用户管理组件中，声明更新用户名的事件：

```typescript
// 声明事件类型：事件名 'update:name'，参数为 string
const emit = defineEmits<{
  (e: 'update:name', value: string): void
  (e: 'delete', id: number): void
}>()

// 正确调用（类型匹配）
emit('update:name', 'Alice') 
// 错误调用（类型不匹配，开发环境报错）
emit('update:name', 123) // ❌ 参数应为 string

defineEmits<{
  (e: 'user-change', user: { id: number; name: string }): void
}>()

defineSlots<{
  // 默认插槽：接收 msg 参数（string 类型）
  default?: (props: { msg: string }) => any
  // 自定义插槽 item：接收用户 ID（number 类型）
  item?: (props: { id: number }) => any
}>()
```[[22](https://blog.csdn.net/u012384510/article/details/130633615)]

父组件使用插槽时，若传递错误类型的参数（如为 `item` 插槽传递字符串 ID），TypeScript 会自动校验并提示。


#### 组合式 API 类型标注

组合式 API 中，需为 `ref`、`reactive` 及函数返回值显式标注类型，确保响应式数据的类型安全。以用户数据获取逻辑 `useUser()` 为例：


##### Ref 类型标注

使用 `ref<T>()` 标注基础类型或复杂对象类型：  
```typescript
import { ref } from 'vue'
import type { User } from '@/types'

// 标注 ref 类型为 User | null，初始值为 null
const user = ref<User | null>(null)
const loading = ref<boolean>(false)

// 定义返回类型为 Promise<User>
async function fetchUser(id: number): Promise<User> {
  loading.value = true
  try {
    const res = await fetch(`/api/users/${id}`)
    return res.json() // TypeScript 自动校验响应是否符合 User 类型
  } finally {
    loading.value = false
  }
}

import { reactive, toRefs } from 'vue'

interface UserState {
  user: User | null
  address: { city?: string }
}

const state = reactive<UserState>({
  user: null,
  address: {}
})

// 解构为 ref 类型，保持响应性与类型
const { user, address } = toRefs(state)
// 访问 address.city 时，类型提示为 string | undefined

import { defineComponent } from 'vue'

// 定义泛型组件，T 为列表项类型
const GenericList = defineComponent({
  props: {
    items: {
      type: Array as () => T[],
      required: true
    },
    renderItem: {
      type: Function as () => (item: T) => JSX.Element,
      required: true
    }
  },
  setup(props) {
    return () => (
      <ul>
        {props.items.map((item, index) => props.renderItem(item, index))}
      </ul>
    )
  }
})

// 使用时指定类型（如 User 列表）
<GenericList<User> 
  items={users} 
  renderItem={(user) => <li>{user.name}</li>} 
/>

// User 类型定义
interface User {
  id: number
  name: string
  age?: number
  isActive: boolean
}

// 提取值为 string 类型的属性名，结果为 "name"
type StringKeys = Extract<keyof User, string>

// 将 User 所有属性变为只读
type ReadonlyUser = Readonly<{ [K in keyof User]: User[K] }>

// 使用时无法修改属性
const user: ReadonlyUser = { id: 1, name: 'Alice', isActive: true }
user.name = 'Bob' // ❌ 报错：属性为只读

// 将 User 属性映射为表单控件配置
type FormControls = {
  [K in keyof User]: {
    type: User[K] extends number ? 'number' : 'text'
    label: string
  }
}

// 自动推断各字段的控件类型
const userFormControls: FormControls = {
  id: { type: 'number', label: 'ID' },
  name: { type: 'text', label: '姓名' }
}