Melhorias para o repositório da meutudo.

basic-is-better.md

Melhorias

Tipagem para componentes de tela

• No caso, para a criação de componentes que serão telas, porque não podemos criar uma tipagem que contenha tudo que esse componente teria por padrão?
• Futuramente, se houver uma migração de biblioteca de navegação, nós podemos utilizar a tipagem padrão para manipular as rotas, sem contar que seria padronizado os componentes

Exemplo:

import React from 'react';
import { Dispatch } from 'redux';
import { NavigatorType } from '~/screens/Navigation';
import { ScreenConfig } from '~/screens/ScreenManager';

interface Screen<Props = {}> extends React.FunctionComponent<ScreenProps<Props>> {
  defaultProps?: ScreenProps<Props>;
  screenConfig?: ScreenConfig;
}

type ScreenProps<Props> = {
  navigator?: NavigatorType;
  dispatch?: Dispatch;
} & Props;

• Toda vez que for criar um componente para ser uma tela, nós podemos utlizar essa tipagem para facilitar no desenvolvimento, até mesmo podemos declarar ela globalmente para evitar importar em todo arquivo:

declare global {
  interface Screen<Props = {}> extends React.FunctionComponent<ScreenProps<Props>> {
    defaultProps?: ScreenProps<Props>;
    screenConfig?: ScreenConfig;
  }

  type ScreenProps<Props> = {
    navigator?: NavigatorType;
    dispatch?: Dispatch;
  } & Props;
}

Como usar?

• Ela por padrão vai existir duas propriedades: navigator e dispatch.

import { View, Text } from 'react-native'

export const ProfileScreen: Screen = ({ dispatch, navigator }) => {
  return (
    <View>
      <Text>Tela de Perfil</Text>
    </View>
  );
};

• Podemos adicionar propriedades para esse componente, como por exemplo um account, que podemos adquirir através do redux.

import { View, Text } from 'react-native'

interface ProfileScreenProps {
  account: {
    name: string;
  };
}

export const ProfileScreen: Screen<ProfileScreenProps> = ({ account }) => {
  return (
    <View>
      <Text>Tela de Perfil: {account.name}</Text>
    </View>
  );
};

• E no final, podemos configurar a configuração da tela e suas propridades padrões:

interface ProfileScreenProps {
  account: {
    name: string;
  };
}

export const ProfileScreen: Screen<ProfileScreenProps> = ({ account }) => {
  return (
    <View>
      <Text>Tela de Perfil: {account.name}</Text>
    </View>
  );
};

ProfileScreen.defaultProps = {
  account: {
    name: 'John Doe',
  },
};

ProfileScreen.screenConfig = {
  screenId: 'ProfileScreen',
};

Tipagem genéricas

• Criar uma pasta apenas para tipagens genéricas, como por exemplo: conta, contratos e etc, para evitar código duplicado e facilitar a manutenção futura