Vue Academy · Aula

Tipagem de composables e refs

Ref , ComputedRef , retorno tipado de composables e MaybeRef .

Tipagem de composables e refs é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Tipando a API de Composição

Funções composáveis são apenas funções, e refs são apenas contêineres tipados. Adicionar tipos explícitos torna suas funções composáveis seguras para consumo e oferece aos chamadores autocompletar completo.

Tipos inferidos de ref

Na maior parte do tempo, o TypeScript infere o tipo de uma ref a partir de seu valor inicial. Um ref(0) é automaticamente um Ref<number>.

import { ref } from 'vue'
const count = ref(0)        // Ref<number>
const name = ref('Coddy')  // Ref<string>

Genéricos explícitos de ref

Quando o valor inicial não consegue expressar o tipo completo — como um valor que começa como null, mas se torna um objeto — passe um genérico explícito.

interface User { id: number; name: string }
const user = ref<User | null>(null)

O tipo Ref

Ref<T> descreve uma ref gravável cujo .value é do tipo T. Use-o para anotar variáveis ou parâmetros de funções que recebem refs.

import type { Ref } from 'vue'
function useDouble(n: Ref<number>) {
  return computed(() => n.value * 2)
}

O tipo ComputedRef

Uma chamada a computed retorna uma ComputedRef<T> somente leitura. Use esse tipo ao anotar uma função composável que retorna valores computados.

import type { ComputedRef } from 'vue'
const doubled: ComputedRef<number> = computed(() => count.value * 2)

Tipando o retorno de uma função composável

Anote o formato do retorno para que os consumidores vejam exatamente o que recebem. Um tipo de retorno explícito também documenta a função composável.

import { ref, type Ref } from 'vue'
function useCounter(): { count: Ref<number>; increment: () => void } {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

Deixando a inferência trabalhar

Muitas vezes, você pode omitir o tipo de retorno explícito e deixar o TypeScript inferi-lo. Adicione um tipo explícito apenas quando quiser um contrato público estável.

MaybeRef para entradas flexíveis

MaybeRef<T> significa um valor que pode ser um T comum ou uma Ref<T>. Isso permite que as funções composáveis aceitem qualquer uma das formas.

import type { MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
  // name could be 'Coddy' or ref('Coddy')
}

Desfazendo o encapsulamento com unref

unref(x) retorna x.value se x for uma ref; caso contrário, retorna o próprio x. Combine-o com MaybeRef para normalizar a entrada.

import { unref, type MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
  const text = unref(name) // always a string
  return 'Hello ' + text
}

toValue: o auxiliar moderno

O Vue 3 adicionou toValue, que desfaz o encapsulamento de refs e chama funções de acesso. Essa é a forma preferida de normalizar entradas MaybeRefOrGetter.

import { toValue, type MaybeRefOrGetter } from 'vue'
function useLen(input: MaybeRefOrGetter<string>) {
  return computed(() => toValue(input).length)
}

Tipando objetos reativos

reactive infere diretamente o tipo do objeto — não é necessário usar .value. Para uma tipagem explícita, anote a variável com a interface do objeto.

import { reactive } from 'vue'
interface State { count: number; name: string }
const state: State = reactive({ count: 0, name: '' })

Verificação rápida

Teste seus conhecimentos sobre a tipagem de funções composáveis e refs.

Recapitulação

Você aprendeu a tipar a API de Composição:

ref infere tipos; use ref<T>() quando o valor inicial for insuficiente.
Ref<T> e ComputedRef<T> anotam refs e valores computados.
Tipar os retornos de funções composáveis cria um contrato claro.
MaybeRef<T> + unref()/toValue() aceitam entradas flexíveis.

Perguntas Frequentes

A aula “Tipagem de composables e refs” é grátis?

Sim — o texto completo de “Tipagem de composables e refs” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Tipagem de composables e refs”?

Ref , ComputedRef , retorno tipado de composables e MaybeRef . Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Tipagem de composables e refs”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Configuração do TypeScript em projetos Vue
Props e emits tipados com defineProps/defineEmits
Tipagem de composables e refs
Componentes Vue genéricos

← Voltar para Vue Academy