Роман Лобигер

TypeScript стал де-факто стандартом в современном фронтенде. Vue 3 изначально спроектирован с учётом поддержки TypeScript, и работа с ним ощущается органичной. При этом Vue не требует обязательного использования TS — он остаётся опциональным, но нативно интегрированным.
В этой статье покажу, как Vue работает с TypeScript, какие особенности нужно учитывать, и зачем эта связка может быть предпочтительнее JavaScript.
Зачем использовать TypeScript во Vue
- Статическая типизация: выявление ошибок на этапе разработки.
- Поддержка IDE: автодополнение, переход к типу, рефакторинг.
- Надёжность компонентов: строгие сигнатуры
props
, событий иemit
. - Масштабируемость: упрощённое сопровождение крупного кода.
Vue сам по себе реактивен и декларативен, но без TS его API не защищает от ошибок типов — вы легко можете передать не ту структуру в props
или вызвать несуществующий метод. TypeScript делает такие ошибки невозможными.
Подключение TypeScript
Создавая проект с Vite
, достаточно указать шаблон:
npm create vue@latest
# выберите TypeScript при генерации
Или вручную установите:
npm install --save-dev typescript
Vue автоматически распознаёт .vue
и .ts
файлы, и если у вас включена поддержка TS в редакторе — всё начнёт работать без дополнительных настроек.
Основные особенности TypeScript во Vue
1. Типизация props и emit
С defineProps
и defineEmits
можно указывать типы напрямую:
<script setup lang="ts">
interface Props {
count: number;
}
const props = defineProps<Props>();
const emit = defineEmits<{
(e: 'increment', value: number): void;
}>();
</script>
Это даёт строгую сигнатуру: нельзя передать в компонент строку вместо числа, и нельзя вызвать emit('foo')
, если такого события нет.
2. Типизация реактивных переменных
ref
и reactive
принимают тип как дженерик:
const name = ref<string>('Hello');
const state = reactive<{ count: number }>({ count: 0 });
В отличие от JS, тут нет риска несуществующего поля: state.foo
вызовет ошибку на этапе компиляции.
3. Типизация компонентов
Если вы хотите использовать компонент в другом месте и получать автоматическое дополнение по props, важно явно экспортировать их с помощью defineProps()
. Это современный способ объявления входных параметров в Vue 3 с Composition API.
<script setup>
// Объявляем пропсы, указывая их типы в виде объекта
const props = defineProps({
title: String,
subtitle: String // необязательный пропс
});
</script>
<template>
<!-- Используем пропсы внутри шаблона -->
<h1>{{ props.title }}</h1>
<h2 v-if="props.subtitle">{{ props.subtitle }}</h2>
</template>
Что меняется в проектировании
- Лучше использовать
Composition API
: он лучше масштабируется и типизируется, чемOptions API
. - Интерфейсы — основной способ описания
props
, состояний, параметровemit
. - Типы желательно выносить в отдельные
.d.ts
или.ts
модули — для переиспользования и читаемости.
Пример: типизация сложного props
-объекта:
interface Product {
id: string;
price: number;
}
const props = defineProps<{
products: Product[];
}>();
Инструменты и опыт
Vue с TypeScript хорошо поддерживается в VS Code. Благодаря volar
(новому плагину вместо vetur
) IDE предоставляет максимально точные подсказки даже в .vue
-файлах.
Также стоит использовать:
eslint-plugin-vue
с поддержкой TypeScriptvue-tsc
— компилятор, проверяющий.vue
файлы так же, как обычные.ts
- строгие настройки
tsconfig.json
Заключение
Vue 3 и TypeScript отлично сочетаются. Фреймворк предоставляет гибкий и типобезопасный API, не навязывая избыточной строгости. Вы получаете лучшее из обоих миров: декларативность Vue и надёжность TypeScript. Это особенно важно при работе в командах и на проектах, где стоимость ошибок высока. Несмотря на небольшую кривую обучения, TypeScript во Vue — это не излишество, а инструмент стабильной разработки.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile
Комментарии
0