#18 - Налаштування TypeScript для Vue проектів

Перше, що вам потрібно зробити, це при встановленні vue вказати, що основною мовою є TypeScript. Тоді вью автоматично створить всі необхідні файли та залежності, а ваші мейн файли будуть відразу в формате ts. 

Якщо ж ви хочете імплементувати ts в вже готовий проект, то вам потрібно створити файл tsconfig.json в корені вашого vue проекту:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "allowJs": false,
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
    "noEmit": true,
    "types": ["vite/client"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Зверніть увагу, що це актуальній конфін на червень 2025 року, якщо ж ви читаєте це пізніше, я б рекомендував подивитися актуальний конфіг на сайті вью. Також не забувайте, що ми розбирали конфіги type script на попередньому уроці, тому ви можете до них повернутися, щоб налаштувати проект під себе.

Для tsconfig.node.json ви можете додати такий конфіг:

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

Якщо ви використовуєте Nuxt, то tsconfig не можна редагувати напряму, тому зо Nuxt самостійно його редагує в реальному часі. Якщо ж вам потрібно якось його відредагувати, то ви можете створити tsconfig.app.json, з наступним вмістом:

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "types": ["@types/node"]
  }
}

Також конфігурацію можна росширити налаштуваннями в nuxt config:

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      strict: true
    }
  }
})

Він буде перезаписувати стандартні налаштування Nuxt, але це не обовʼязково, можете його і не створювати, у накст з тс із коробки все працює чудово.

В vue компонентах типізація виглядає приблизно так:

<script lang="ts" setup>
defineProps<{
  name: string
  age?: number
}>()

const emit = defineEmits<{
  (e: 'submit', payload: string): void
}>()
</script>

Якщо ви використовуєте Feature Based тип структурування, то типи ви можете класти прямо в папку з модулем. Але по дефолту в vue вже є зарезервована папка types (myapp/src/types), куди вам потрібно складувати глобальні типи. Вони будуть працювати автоматично в nuxt, в vue вам потрібно налаштувати їх в tsconfig:

"include": [
  "src/**/*",
  "types/**/*"
]

Глобальні типи виглядають прблизно так types/global.d.ts:

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

В усіх інших випадках, ви використовуєте стандатний ts:

type User = {
  id: number
  name: string
}

const fetchUser = async (id: number): Promise<User> => {
  const res = await fetch(`/api/user/${id}`)
  return await res.json()
}