Типизация композируемых модулей и ссылок
Ref , ComputedRef , типизированное возвращаемое значение композируемых модулей и MaybeRef
«Типизация композируемых модулей и ссылок» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Типизация API композиции
Композаблы — это обычные функции, а рефы — обычные типизированные контейнеры. Явное добавление типов делает композаблы безопасными для использования и предоставляет вызывающему коду полное автодополнение.
Выводимые типы ref
В большинстве случаев TypeScript выводит тип ref из его начального значения. Например, ref(0) автоматически становится Ref<number>.
import { ref } from 'vue'
const count = ref(0) // Ref<number>
const name = ref('Coddy') // Ref<string>Явные обобщённые типы ref
Если начальное значение не описывает полный тип — например, значение начинается с null, а затем становится объектом, — передайте явный обобщённый тип.
interface User { id: number; name: string }
const user = ref<User | null>(null)Тип Ref
Ref<T> описывает доступный для записи ref, чей .value имеет тип T. Используйте его для аннотирования переменных или параметров функций, которые получают refs.
import type { Ref } from 'vue'
function useDouble(n: Ref<number>) {
return computed(() => n.value * 2)
}Тип ComputedRef
computed возвращает доступный только для чтения ComputedRef<T>. Используйте этот тип при аннотировании композабла, который возвращает вычисляемые значения.
import type { ComputedRef } from 'vue'
const doubled: ComputedRef<number> = computed(() => count.value * 2)Типизация результата композабла
Опишите форму результата, чтобы пользователи композабла точно видели, что они получают. Явный тип результата также документирует композабл.
import { ref, type Ref } from 'vue'
function useCounter(): { count: Ref<number>; increment: () => void } {
const count = ref(0)
const increment = () => count.value++
return { count, increment }
}Использование вывода типов
Часто явный тип результата можно опустить и позволить TypeScript вывести его самостоятельно. Добавляйте явный тип только тогда, когда Вам нужен стабильный публичный контракт.
MaybeRef для гибких входных данных
MaybeRef<T> означает значение, которое может быть обычным T или Ref<T>. Благодаря этому композаблы принимают любую из этих форм.
import type { MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
// name could be 'Coddy' or ref('Coddy')
}Распаковка с unref
unref(x) возвращает x.value, если x является ref, и сам x в противном случае. Используйте его вместе с MaybeRef, чтобы нормализовать входные данные.
import { unref, type MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
const text = unref(name) // always a string
return 'Hello ' + text
}toValue: современный помощник
В Vue 3.3 появился toValue, который распаковывает refs и вызывает функции-геттеры. Это предпочтительный способ нормализовать входные данные MaybeRefOrGetter.
import { toValue, type MaybeRefOrGetter } from 'vue'
function useLen(input: MaybeRefOrGetter<string>) {
return computed(() => toValue(input).length)
}Типизация реактивных объектов
reactive напрямую выводит тип объекта — использовать .value не нужно. Для явной типизации аннотируйте переменную интерфейсом объекта.
import { reactive } from 'vue'
interface State { count: number; name: string }
const state: State = reactive({ count: 0, name: '' })Быстрая проверка
Проверьте свои знания о типизации композаблов и refs.
Итоги
Вы научились типизировать API композиции:
- ref выводит типы; используйте ref<T>(), когда начального значения недостаточно.
- Ref<T> и ComputedRef<T> аннотируют refs и вычисляемые значения.
- Типизируйте результаты композаблов, чтобы создать понятный контракт.
- MaybeRef<T> + unref()/toValue() принимают гибкие входные данные.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «Типизация композируемых модулей и ссылок» бесплатный?
Да — полный текст урока «Типизация композируемых модулей и ссылок» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Типизация композируемых модулей и ссылок»?
Ref , ComputedRef , типизированное возвращаемое значение композируемых модулей и MaybeRef Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Типизация композируемых модулей и ссылок»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка TypeScript в проектах Vue
- Типизированные свойства и события с defineProps/defineEmits
- Типизация композируемых модулей и ссылок
- Обобщённые компоненты Vue