Работа Vue.js с TypeScript

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 с поддержкой TypeScript
• vue-tsc — компилятор, проверяющий .vueфайлы так же, как обычные .ts
• строгие настройки tsconfig.json

Заключение

Vue 3 и TypeScript отлично сочетаются. Фреймворк предоставляет гибкий и типобезопасный API, не навязывая избыточной строгости. Вы получаете лучшее из обоих миров: декларативность Vue и надёжность TypeScript. Это особенно важно при работе в командах и на проектах, где стоимость ошибок высока. Несмотря на небольшую кривую обучения, TypeScript во Vue — это не излишество, а инструмент стабильной разработки.