Estado derivado e seletores com tipos
Escreva funções seletoras tipadas para estados calculados
Estado derivado e seletores com tipos é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 4 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 TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.
O que é state derivado?
State derivado é o state calculado a partir de outro state — como filtrar uma lista ou somar valores. Os seletores encapsulam esse cálculo e podem ser memorizados para melhorar o desempenho.
// Raw state
const users: User[] = [/* ... */];
// Derived state: active users only
const activeUsers = users.filter(u => u.isActive);Funções seletoras tipadas
Escreva funções seletoras com tipos de retorno explícitos para documentar o que elas calculam e impedir a deriva dos tipos.
import type { RootState } from "./store";
const selectActiveUsers = (state: RootState): User[] =>
state.users.filter((u) => u.isActive);
const selectUserCount = (state: RootState): number =>
state.users.length;reselect: seletores memorizados
A biblioteca reselect (usada pelo RTK) cria seletores memorizados que só recalculam o resultado quando suas entradas mudam.
import { createSelector } from "reselect";
const selectActiveUsers = createSelector(
(state: RootState) => state.users,
(users) => users.filter((u) => u.isActive)
);
// Return type inferred: User[]Seletores parametrizados tipados
Seletores de fábrica aceitam argumentos e retornam um seletor — úteis para buscas por entidade.
const selectUserById = (id: string) =>
createSelector(
(state: RootState) => state.users,
(users) => users.find((u) => u.id === id) ?? null
);
// Usage: const user = useAppSelector(selectUserById("123"));Seletores do Zustand
No Zustand, passe um seletor tipado para o gancho do store a fim de ler apenas a fatia necessária.
const activeUsers = useUserStore((s) => s.users.filter(u => u.isActive));
// Inferred type: User[]State derivado no React com useMemo
Para state derivado local, use useMemo com anotações de tipo adequadas para memorizar valores calculados nos componentes.
const sortedUsers = useMemo(
(): User[] => [...users].sort((a, b) => a.name.localeCompare(b.name)),
[users]
);Compondo seletores
Crie seletores complexos compondo seletores mais simples — o reselect gerencia a memorização em toda a cadeia.
const selectActiveUserNames = createSelector(
selectActiveUsers,
(users) => users.map((u) => u.name)
); // string[]Zustand seguro quanto aos tipos com immer para atualizações derivadas
Ao calcular atualizações derivadas, use immer para alterar um state rascunho — o TypeScript garante que apenas propriedades válidas sejam modificadas.
const useStore = create<AppStore>()(immer((set) => ({
users: [],
activeCount: 0,
setUsers: (users) =>
set((draft) => {
draft.users = users;
draft.activeCount = users.filter((u) => u.isActive).length;
}),
})));Inferência do tipo de retorno do seletor
O TypeScript infere os tipos de retorno dos seletores, mas anotações explícitas melhoram a legibilidade e impedem o uso acidental de any em expressões dinâmicas.
// Inferred — may widen to any for complex expressions
const selectTotals = createSelector(
(s: RootState) => s.cart.items,
(items) => items.reduce((sum, i) => sum + i.price, 0) // inferred: number
);Testando seletores
Os seletores são funções puras — teste-os passando um state simulado e verificando o tipo e o valor da saída.
test("selectActiveUsers", () => {
const state = { users: [{ id: "1", isActive: true }, { id: "2", isActive: false }] } as RootState;
expect(selectActiveUsers(state)).toHaveLength(1);
});Recapitulação: seletores tipados
Seletores tipados: escreva funções que recebem RootState com tipos de retorno explícitos, use createSelector para memorização, componha seletores para derivações complexas e teste-os como funções puras.
Verificação rápida
Qual vantagem createSelector oferece em relação a uma função seletora simples?
O que você aprendeu
Seletores tipados recebem RootState e retornam valores derivados com tipos precisos. Use createSelector para memorização, componha seletores para lógicas complexas e escreva seletores de fábrica para buscas parametrizadas de entidades.
Perguntas Frequentes
A aula “Estado derivado e seletores com tipos” é grátis?
Sim — o texto completo de “Estado derivado e seletores com tipos” é 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 TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.
O que vou aprender em “Estado derivado e seletores com tipos”?
Escreva funções seletoras tipadas para estados calculados Você pratica TypeScript 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 TypeScript Academy?
Nenhuma experiência prévia é necessária. TypeScript 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 4 de 4.
Quanto tempo leva a aula “Estado derivado e seletores com tipos”?
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 TypeScript Academy?
Sim. Cada aula de TypeScript 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
- Tipando slices e thunks do Redux Toolkit
- Padrões de tipagem de stores Zustand
- XState: máquinas de estados tipadas
- Estado derivado e seletores com tipos