Vue 3 проектировался с TypeScript в голове. Это не надстройка как во Vue 2 — типы вшиты в ядро. **Настройка проекта:** ```bash npm create vue@latest my-app # Выбрать: Add TypeScript? Yes ``` ```json // tsconfig.json (ключевые настройки) { "compilerOptions": { "target": "ES2020", "module": "ESNext", "moduleResolution": "bundler", "strict": true, "jsx": "preserve", "noUnusedLocals": true, "noUnusedParameters": true, "paths": { "@/*": ["./src/*"] } }, "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"], "references": [{ "path": "./tsconfig.node.json" }] } ``` ```json // tsconfig.app.json — Vue-specific { "extends": "./tsconfig.json", "compilerOptions": { "composite": true, "types": ["vite/client"] }, "include": ["src/**/*.ts", "src/**/*.vue"] } ``` **SFC с TypeScript:** ```vue ``` **defineProps с типами:** ```vue ``` **Типизация template refs:** ```vue ``` --- ## 📌 Реальные кейсы 🔹 **Типобезопасный provide/inject:** ```typescript // types/injection-keys.ts import type { InjectionKey, Ref } from 'vue' import type { User } from '@/types' export const UserKey: InjectionKey> = Symbol('user') export const ThemeKey: InjectionKey<'light' | 'dark'> = Symbol('theme') // Parent import { UserKey } from '@/types/injection-keys' provide(UserKey, currentUser) // Child const user = inject(UserKey) // Ref | undefined const user = inject(UserKey)! // Ref — если уверен ``` 🔹 **Типизированный composable:** ```typescript // composables/usePagination.ts interface PaginationOptions { initialPage?: number pageSize?: number } interface PaginationReturn { page: Ref pageSize: Ref offset: ComputedRef next: () => void prev: () => void goTo: (p: number) => void } export function usePagination( options: PaginationOptions = {}, ): PaginationReturn { const page = ref(options.initialPage ?? 1) const pageSize = ref(options.pageSize ?? 20) const offset = computed(() => (page.value - 1) * pageSize.value) function next() { page.value++ } function prev() { if (page.value > 1) page.value-- } function goTo(p: number) { page.value = p } return { page, pageSize, offset, next, prev, goTo } } ``` --- ## Частые ошибки ❌ Смешивать runtime и type-based declaration в `defineProps`: ```vue ``` ✅ Только один синтаксис: ```vue ``` --- ❌ Забывать `lang="ts"` в теге script: ```vue ``` ✅ Всегда указывай `lang="ts"`: ```vue ``` --- ❌ `as any` вместо правильной типизации: ```typescript const result = response.data as any // Теряешь весь смысл TS ``` ✅ Типизируй API-ответы: ```typescript interface ApiResponse { data: T meta: { total: number; page: number } } const { data } = await api.get>('/users') // data.data — User[] // data.meta.total — number ``` --- ## Резюме | Что | Как типизировать | |---|---| | Props | `defineProps()` | | Emits | `defineEmits<{ event: [args] }>()` | | Slots | `defineSlots<{ name(props): void }>()` | | Refs (DOM) | `ref(null)` | | Refs (компонент) | `ref \| null>(null)` | | Provide/Inject | `InjectionKey` | | Composables | Явные типы параметров и возвращаемого значения | 🔑 Vue 3 + TypeScript = full type safety из коробки. Используй type-based `defineProps`/`defineEmits`, типизируй inject-ключи через `InjectionKey`, и забудь про `any`. ---

Как работает TypeScript с Vue 3?