Практический учебник TypeScript + Vue3
Vue 3 отлично поддерживает TypeScript. В этом руководстве рассматриваются практики разработки на Vue 3 + TypeScript.
Composition API Vue 3 и система типов TypeScript идеально сочетаются, делая код безопаснее и проще в сопровождении.
Смотреть учебник по Vue3:https://www.example.com/vue3/vue3-tutorial.html
Диаграмма SVG: разработка на Vue 3 + TypeScript
Почему стоит использовать TypeScript в Vue 3
Vue 3 с самого начала своего проектирования полностью принял TypeScript, обеспечивая отличную поддержку типов.
Функциональный стиль Composition API идеально работает с системой типов TypeScript: ref поддерживает дженерики, computed имеет вывод типов, а props имеют полную проверку типов.
Использование TypeScript обеспечивает типовую защиту для props, событий и реактивных данных компонентов Vue.
Vue 3 изначально поддерживает TypeScript:Исходный код Vue 3 написан на TypeScript, обеспечивая бесшовную интеграцию с TypeScript.
Создание проекта
Используйте Vite для создания проекта Vue 3 с поддержкой TypeScript.
Инициализация
npm create vite@latest my-vue-app -- --template vue-ts
# Перейдите в каталог проекта
cd my-vue-app
# Установить зависимости
npm install
Рекомендация:Vite — официально рекомендуемый инструмент сборки для Vue. При создании проекта просто выберите шаблон vue-ts.
Типы компонентов
Используйте defineComponent и PropType для определения типов компонента и Props.
src/components/UserCard.vue
<div class="user-card">
<h3>{{ user.name }}</h3>
<p>{{ user.email }}</p>
<button @click="handleEdit">Редактировать</button>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
// Определить интерфейс типа пользователя
interface User {
id: number
name: string
email: string
}
export default defineComponent({
name: 'UserCard',
// Определение props
props: {
// Использовать PropType для объявления типа
user: {
type: Object as PropType<User>,
required: true
}
},
// Объявить события, испускаемые компонентом
emits: ['edit'],
setup(props, { emit }) {
// Обработать клик редактирования
const handleEdit = () => {
emit('edit', props.user)
}
return { handleEdit }
}
})
</script>
Результат:
UserCard 组件渲染成功
PropType：Когда тип props является сложным объектом, необходимо использовать PropType для утверждения типа.
Типы Composition API
При использовании реактивных API, таких как ref и computed, TypeScript обеспечивает полную поддержку типов.
src/components/Counter.vue
<div>
<p>Количество: {{ count }}</p>
<p>Умножить: {{ doubled }}</p>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
</template>
<script lang="ts">
import { ref, computed } from 'vue'
export default {
setup() {
// ref: определить реактивные данные, указать тип с помощью дженериков
const count = ref<number>(0)
// computed: вычисляемое свойство, автоматически выводит тип возвращаемого значения
const doubled = computed(() => count.value * 2)
// Определить методы
const increment = () => {
count.value++
}
const decrement = () => {
count.value--
}
return { count, doubled, increment, decrement }
}
}
</script>
Результат:
Counter 组件渲染成功
Вывод типов:Composition API во Vue 3 автоматически выводит типы на основе начального значения; для сложных типов можно явно указать дженерики.
Определения интерфейсов
Централизуйте интерфейсы типов проекта в каталоге types.
src/types/index.ts
export interface User {
id: number // ID пользователя
name: string // Имя пользователя
email: string // Электронная почта
avatar?: string // Аватар (необязательный)
}
// Объект передачи данных для создания пользователя
export interface CreateUserDTO {
name: string // Имя пользователя
email: string // Электронная почта
password: string // Пароль
}
// Обобщённый тип ответа API
export interface ApiResponse<T> {
success: boolean // Признак успеха
data?: T // Данные при успехе
error?: string // Сообщение об ошибке при сбое
}
Централизованное управление типами:Поместите определения типов в каталог types для удобного повторного использования в нескольких компонентах.
Примечания
- defineComponent：Обеспечивает полный вывод типов
- PropType：Для сложных типов Props нужно использовать
- ref с generic:Явно указывайте сложные типы
- emits：Объявляйте типы событий
Лучшие практики:Vue 3 рекомендует использовать Composition API + TypeScript для лучшего опыта разработки.
Итог
Vue 3 и TypeScript прекрасно сочетаются.
- defineComponent：Получите полный вывод типов
- PropType：Обеспечьте типобезопасность для props
- ref：Указывайте реактивные типы с помощью generic-параметров
- computed：Автоматически выводить типы вычисляемых свойств
Другие расширенияРекомендации:TypeScript настоятельно рекомендуется для проектов на Vue 3, особенно в крупных приложениях.