// 子孫組件 - Child.vue  
<script setup lang="ts">
import { inject } from 'vue'

// 問題來了：類型是什麼？編輯器不知道！
const config = inject('appConfig')
const updateFn = inject('updateTheme')

// 當你嘗試使用的時候
const switchTheme = () => {
  // 這裏TypeScript會抱怨：updateFn可能是undefined
  // 而且config也是any類型，沒有任何類型提示
  updateFn('light')  // ❌ 對象可能為"undefined"
  console.log(config.apiBaseUrl) // ❌ config是any，但能運行
}
</script>

// 子孫組件
<script setup lang="ts">
import { inject } from 'vue'

// 使用泛型告訴TypeScript：我期望得到這個類型
const config = inject<{ theme: string; apiBaseUrl: string }>('appConfig')
const updateFn = inject<(theme: string) => void>('updateTheme')

// 現在有類型提示了！
const switchTheme = () => {
  if (config && updateFn) {
    updateFn('light')  // ✅ 正確識別為函數
    console.log(config.apiBaseUrl) // ✅ 知道apiBaseUrl是string
  }
}
</script>

// Child.vue
<script setup lang="ts">
import { inject } from 'vue'
import { InjectionKeys } from '@/constants/injection-keys'

// 類型安全地注入
const config = inject(InjectionKeys.APP_CONFIG)
const updateFn = inject(InjectionKeys.UPDATE_THEME)

// TypeScript現在知道config的類型是AppConfig | undefined
const switchTheme = () => {
  if (config && updateFn) {
    updateFn('light')  // ✅ 正確：'light'在主題範圍內
    // updateFn('blue') // ❌ 錯誤：'blue'不是有效主題
  }
}
</script>

// 首先，在一個集中位置定義所有注入類型和鍵
// src/types/injection.types.ts
import { createInjectionKey } from '@/utils/injection-utils'

export interface AppConfig {
  theme: 'light' | 'dark'
  apiBaseUrl: string
}

export interface UserInfo {
  id: number
  name: string
  avatar: string
}

// 創建類型安全的注入鍵
export const APP_CONFIG_KEY = createInjectionKey<AppConfig>('app-config')
export const USER_INFO_KEY = createInjectionKey<UserInfo>('user-info')
export const UPDATE_THEME_KEY = createInjectionKey<(theme: AppConfig['theme']) => void>('update-theme')

// Grandparent.vue
<script setup lang="ts">
import { safeProvide } from '@/utils/injection-utils'
import { APP_CONFIG_KEY, USER_INFO_KEY, UPDATE_THEME_KEY, type AppConfig } from '@/types/injection.types'

const appConfig: AppConfig = {
  theme: 'dark',
  apiBaseUrl: 'https://api.example.com'
}

const userInfo = {
  id: 1,
  name: '張三',
  avatar: 'https://example.com/avatar.jpg'
}

const updateTheme = (newTheme: AppConfig['theme']) => {
  console.log(`切換主題到：${newTheme}`)
}

// 現在provide是類型安全的
safeProvide(APP_CONFIG_KEY, appConfig)
safeProvide(USER_INFO_KEY, userInfo)  // ✅ 自動檢查userInfo是否符合UserInfo接口
safeProvide(UPDATE_THEME_KEY, updateTheme)
</script>

// Child.vue
<script setup lang="ts">
import { safeInject } from '@/utils/injection-utils'
import { APP_CONFIG_KEY, UPDATE_THEME_KEY } from '@/types/injection.types'

// 看！這裏沒有泛型參數，但類型完全正確
const config = safeInject(APP_CONFIG_KEY)
const updateFn = safeInject(UPDATE_THEME_KEY)

// 直接使用，不需要空值檢查
const switchTheme = () => {
  updateFn('light')  // ✅ 完全類型安全，且不會undefined
  console.log(`當前API地址：${config.apiBaseUrl}`)
}
</script>

// Grandparent.vue
<script setup lang="ts">
import { useProvideAppConfig } from '@/composables/useAppConfig'

const appConfig = {
  theme: 'dark' as const,
  apiBaseUrl: 'https://api.example.com'
}

const updateTheme = (newTheme: 'light' | 'dark') => {
  console.log(`切換主題到：${newTheme}`)
}

// 一行代碼完成所有provide
const { getThemeColor } = useProvideAppConfig(appConfig, updateTheme)
</script>

// Child.vue
<script setup lang="ts">
import { useAppConfig } from '@/composables/useAppConfig'

// 像使用Vue內置的useRoute、useRouter一樣
const { config, isDarkTheme, toggleTheme } = useAppConfig()

// 直接使用，所有類型都已正確推斷
const handleClick = () => {
  toggleTheme()
  console.log(`當前主題：${config.theme}`)
}
</script>

// ui-library/src/components/Button/Button.vue
<script setup lang="ts">
import { useLibraryConfig } from '../../injection'

const { theme, size } = useLibraryConfig()

// 使用注入的配置
const buttonStyle = computed(() => ({
  backgroundColor: theme.value.primaryColor,
  borderRadius: theme.value.borderRadius,
  height: size.value.medium
}))
</script>

<template>
  <button :style="buttonStyle" class="library-button">
    <slot></slot>
  </button>
</template>

// 祖輩組件
<script setup lang="ts">
import { ref, provide } from 'vue'
import { USER_INFO_KEY } from '@/types/injection.types'

// 使用ref來管理異步狀態
const userInfo = ref<{ id: number; name: string } | null>(null)

// 異步獲取數據
fetchUserInfo().then(data => {
  userInfo.value = data
})

// 直接注入ref，子孫組件可以響應式地訪問
provide(USER_INFO_KEY, userInfo)
</script>

// 子孫組件
<script setup lang="ts">
import { inject } from 'vue'
import { USER_INFO_KEY } from '@/types/injection.types'

const userInfoRef = inject(USER_INFO_KEY)

// 使用計算屬性來安全訪問
const userName = computed(() => userInfoRef?.value?.name ?? '加載中...')
</script>

// 創建帶標識符的注入鍵
export function createDataSourceKey(id: string) {
  return createInjectionKey<DataSource>(`data-source-${id}`)
}

// 在祖輩組件中
provide(createDataSourceKey('user'), userDataSource)
provide(createDataSourceKey('product'), productDataSource)

// 在子孫組件中
const userSource = safeInject(createDataSourceKey('user'))
const productSource = safeInject(createDataSourceKey('product'))

// types/moduleA.ts
import type { ModuleB } from './moduleB'

export interface ModuleA {
  name: string
  b: ModuleB  // 引用ModuleB類型
}

// types/moduleB.ts  
import type { ModuleA } from './moduleA'

export interface ModuleB {
  id: number
  a?: ModuleA  // 可選，避免強制循環
}

export function createModuleKey<T>() {
  return createInjectionKey<T>('module')
}

// 使用時各自指定具體類型
provide(createModuleKey<ModuleA>(), moduleAInstance)