0Pricing
Vue Academy · Урок

Настройка TypeScript в проектах Vue

vite.config.ts, tsconfig.json, vue-tsc, lang='ts' в SFC и поддержка TypeScript в IDE

«Настройка TypeScript в проектах Vue» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

TypeScript во Vue 3

Vue 3 был переписан на TypeScript, поэтому обеспечивает отличную поддержку типов. Хорошо настроенный проект обнаруживает ошибки во время компиляции и предоставляет качественное автодополнение в редакторе для файлов .vue.

Настройка проекта с TS

Проще всего начать с create-vue: он спросит, нужно ли добавить TypeScript, и настроит tsconfig.json, vue-tsc и необходимые инструменты.

npm create vue@latest
# select "Add TypeScript? Yes"

Основы tsconfig.json

Файл tsconfig.json управляет компиляцией. Самая важная настройка для обнаружения ошибок — строгий режим.

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext"
  }
}

Почему важен строгий режим

strict: true включает strictNullChecks, noImplicitAny и другие проверки. Он заставляет Вас обрабатывать null/undefined и не позволяет значениям без типов незаметно проходить проверку.

Псевдонимы путей

Псевдоним @/ указывает на папку src, поэтому импорты остаются понятными независимо от глубины вложенности файла. Настройте его и в tsconfig.json, и в сборщике.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Использование псевдонима

Теперь импорты ссылаются на модули от корня проекта, а не используют относительные цепочки ../../.

import Button from '@/components/Button.vue'
import { useAuth } from '@/composables/useAuth'

TypeScript в SFC

Чтобы использовать TypeScript внутри одиночного файлового компонента, добавьте lang="ts" в тег script. С <script setup> это также открывает доступ к типизированным макросам.

<script setup lang="ts">
const count: number = 0
</script>

Проверка типов в SFC

Обычный компилятор tsc не понимает файлы .vue. Vue поставляется с vue-tsc — оболочкой, которая проверяет типы шаблонов и скриптов вместе.

vue-tsc --noEmit

Добавление скрипта проверки

Добавьте скрипт в package.json, чтобы система непрерывной интеграции и Вы могли проверять типы одной командой.

{
  "scripts": {
    "type-check": "vue-tsc --noEmit"
  }
}

Поддержка редактора с Volar

Расширение Volar (Vue — Official) для VS Code предоставляет интеллектуальные возможности TypeScript в файлах .vue: автодополнение, переход к определению и проверку типов в шаблонах. Отключите старое расширение Vetur, чтобы избежать конфликтов.

Режим захвата

Volar может работать в режиме Takeover, заменяя встроенное расширение TS, чтобы обрабатывать и файлы .ts, и файлы .vue. Это повышает производительность и единообразие в крупных проектах.

Быстрая проверка

Проверьте свои знания о настройке TypeScript.

Итоги

Вы настроили TypeScript в Vue:

  • Включили строгий режим в tsconfig.json для самых тщательных проверок.
  • Настроили псевдоним пути @/* для src.
  • Добавили lang="ts" в скрипты SFC.
  • Настроили проверку типов с помощью vue-tsc --noEmit и использовали расширение Volar в VS Code.

Часто задаваемые вопросы

Урок «Настройка TypeScript в проектах Vue» бесплатный?

Да — полный текст урока «Настройка TypeScript в проектах Vue» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Настройка TypeScript в проектах Vue»?

vite.config.ts, tsconfig.json, vue-tsc, lang='ts' в SFC и поддержка TypeScript в IDE Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Настройка TypeScript в проектах Vue»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Настройка TypeScript в проектах Vue
  2. Типизированные свойства и события с defineProps/defineEmits
  3. Типизация композируемых модулей и ссылок
  4. Обобщённые компоненты Vue
← Назад к Vue Academy