3 dicas para você usar em projetos React + Typescript!

Aprenda a usar essas features do Typescript!

Introdução

Antes de mais nada, se você está aprendendo sobre React + Typescript, fiz um vídeo que ficou bem massa, depois da uma olhada lá. 😎

Hoje vamos abordar uma dica rápida porém muito útil no dia-a-dia como Dev se você utiliza Typescript:

Pick
Omit

Bora aprender a usar na prática com exemplos da vida real?!

Pick

Veja o exemplo abaixo:

// src/components/Modal/index.tsx
 
// Tipagem do componente Modal
export type ModalProps = {
  title: string;
  isOpen: boolean;
  size?: 'small' | 'xsmall' | 'medium' | 'large';
  children: React.ReactNode;
  onRequestClose: () => void;
};
 
// Componente Modal
const Modal = ({
  title,
  isOpen,
  size = 'medium',
  children,
  onRequestClose
}: ModalProps) => {
 
  return (
  	<S.Container size={size}> {/* a propriedade `size` é passada para o Container */}
 
    </S.Container>
  )
}

Nesse exemplo, vamos usar React + Styled Components

Criamos um type para um componente de Modal, agora vamos estilizar usando o Styled Components:

// src/components/Modal/styles.ts
import styled, { css } from 'styled-components';
 
// "Pegamos" apenas a propriedade `size` de `ModalProps`
type ContainerProps = Pick<ModalProps, 'size'>;
 
// Passamos a tipagem para o component Container
export const Container = styled.div<ContainerProps>`
	${({ size }) => css` // Recebe props e desestrutura, pegando o `size`
		${size === 'small' && // Verifica se o `size` é igual "small" e aplica uma estilização
    css`
      width: 26rem;
      height: 80%;
    `}
	`}
`;

Ou seja, aproveitamos a tipagem para do componente Modal e utilizamos apenas uma propriedade do ModalProps para nosso componente estilizado Container.

Nesse caso poderíamos criar uma nova tipagem apenas para o Container, não teria problema.

Mas a vantagem em utilizar Pick nesse caso é que, como a propriedade size recebe apenas algumas opções, se alterarmos no ModalProps automaticamente alteramos no ContainerProps.

// src/components/Modal/index.tsx
export type ModalProps = {
  title: string;
  isOpen: boolean;
  size?: 'medium' | 'large'; // -> Perceba que `size` agora só aceita duas opções
  children: React.ReactNode;
  onRequestClose: () => void;
};
 
// src/components/Modal/styles.ts
type ContainerProps = Pick<ModalProps, 'size'>; // -> Nao precisamos mexer em nada aqui, o `size` vai aceitar apenas 'medium' ou 'large'

Com o Pick podemos selecionar mais de uma propriedade de um tipo:

type ContainerProps = Pick<ModalProps, 'size' | 'title' | ...>; // Podemos selecionar quantas propriedades quisermos
 
// Mesmo que fazer:
type ContainerProps = {
  size: 'small' | 'xsmall' | 'medium' | 'large';
  title: string;
	// ...
};

Omit

O Omit é bem parecido com o Pick, porém ao invés de selecionar uma propriedade de uma tipagem, ele remove (omite).

Exemplo:

export type ModalProps = {
  title: string;
  isOpen: boolean;
  size?: 'small' | 'xsmall' | 'medium' | 'large';
  children: React.ReactNode;
  onRequestClose: () => void;
};
 
type ContainerProps = Omit<ModalProps, 'title'>;
 
// O mesmo que fazer:
//	type ContainerProps = { -> Todas as propriedades menos a `title`
//		isOpen: boolean;
// 		size?: 'small' | 'xsmall' | 'medium' | 'large';
// 		children: React.ReactNode;
// 		onRequestClose: () => void;
//	};

E assim como o Pick, podemos remover uma ou várias propriedades de uma tipagem.

type ContainerProps = Omit<ModalProps, 'title' | 'isOpen' | 'size'>;
 
// O mesmo que fazer:
//	type ContainerProps = { -> Todas as propriedades menos a `title`, `isOpen` e `size`
// 		children: React.ReactNode;
// 		onRequestClose: () => void;
//	};

Massa né?!

Dica bônus

Se você utiliza a lib react-select com validação utilizando o Yup, podemos fazer o seguinte para melhorar nossa validação:

// Validação com React-Select + Yup
const schema = Yup.object().shape({
  id: Yup.object().required("Campo obrigatório") // Passamos como objeto, por causa do react-select
});

// Tipagem para User
export type UserProps = {
  id: number;
  name: string;
  password: string;
};
 
// Tipagem para um formulário de Adição
type SubmitDataProps = {
  id: {
    value: number;
  };
} & Omit<UserProps, 'id'>;

Exemplo de formulário utilizando React Select:

return (
  <Form onSubmit={handleSubmitData}>
		<Select
			name="id"
			placeholder="Selecione um usuário"
			options={usersoptions}
		/>
 
    <Button type="submit">Adicionar</Button>
  </Form>
);

Quando um usuário é selecionado e o formulário é submetido, o React Select envia como:

{
  id: {
    value: 1; // usuario com id 1 por exemplo
  }
}

Agora basta criar um objeto para enviar na chamada à API:

const handleSubmitData = (data: SubmitDataProps) {
  const { id, ...rest } = data;
 
  const dataSubmit = {
    ...rest,
    id: id.value
  }
 
  await postUser(dataSubmit); // Exemplo de chamada à API para criar um usuário
}

Conclusão

Nesse post aprendemos como utilizar o Pick e o Omit, duas funcionalidades muito úteis que o Typescript nos prove.

Além disso, aprendemos a utilizar o React Select com Typescript e validação utilizando o Yup.

Se quiser mais conteúdo sobre React Select, Yup ou Typescript, fique ligado aqui e no canal do YouTube, ta sempre tendo bastante coisa nova!

Qualquer dúvida deixe nos comentários aqui ou me manda no meu LinkedIn, será um prazer responder. Até a próxima!

•

Curtiu? Compartilhe esse post: