Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Não sei o que fazer com esse erro, esse codigo, esta em typescript com redux saga

import { useMemo } from 'react';
import { useSelector } from 'react-redux';

import { ApplicationState } from '../../../ducks';
import { MapInstance, MapInstancePaletteColorBar } from '../../../model';

export type ClientPalette = {
  id: number;
  clientId: number;
  paletteId: number;
};

export type PaletteOption = {
  id: number;
  stopColor: string;
  offset: number;
};

type PaletteColorBar = {
  stops: PaletteOption[];
};

type UsePaletteBar = {
  paletteOptions: PaletteOption[];
  clientsPalettes: ClientPalette[];
  handleRadio(event: number): void;
};

type UsePaletteBarState = {
  mapInstances: MapInstance[];
  selectedMapId: number;
  selectedMapTypeId: number;
};

const isValidColorBar = (configMap: MapInstancePaletteColorBar): boolean =>
  !!configMap && typeof configMap.paletteColorBar === 'string';

export const useConfigMap = (): UsePaletteBar => {
  const { mapInstances, selectedMapId, selectedMapTypeId } = useSelector<
    ApplicationState,
    UsePaletteBarState
  >(state => ({
    mapInstances: state.map.mapInstances,
    selectedMapId: state.map.selectedMapId,
    selectedMapTypeId: state.map.selectedMapInstanceTypeId,
  }));

  const configMap = useMemo(() => {
    if (selectedMapId > 0 && selectedMapTypeId > 0) {
      return mapInstances.find(
        m =>
          m.mapInstanceType.id === selectedMapTypeId &&
          m.mapInstanceType.map.id === selectedMapId,
      )?.mapInstancePaletteColorBar;
    }
    return undefined;
  }, [mapInstances, selectedMapId, selectedMapTypeId]);

  const { clientsPalettes, paletteOptions, handleRadio } = useMemo(() => {
    if (!configMap || !isValidColorBar(configMap)) {
      return {
        clientsPalettes,
        paletteOptions: [],
        handleRadio: null,
      };
    }

    const pallete = JSON.parse(configMap.paletteColorBar) as PaletteColorBar;
    return {
      paletteOptions: pallete.stops.map(item => ({
        ...item,
        id: item.id,
        offset: !Number.isNaN(Number(item.offset)) ? Number(item.offset) : 1,
      })),
      clientsPalettes: clientsPalettes.map(
        (item: { id: 1; clientId: 19; paletteId: 1 }) => {
          return {
            id: item.id,
            clientId: item.clientId,
            paletteId: item.paletteId,
          };
        },
      ),
    };
  }, [configMap]);

  return {
    clientsPalettes,
    paletteOptions,
    handleRadio,
  };
};

'clientsPalettes' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

1 resposta
solução!

Olá, Guilherme! Tudo bem?

Acredito que você possa resolver isso tipando os retornos da sua função no useMemo. Você pode fazer isso de duas formas:

  • Declarar o objeto e depois retorná-lo (const paletteBar: UsePaletteBar = { clientsPalettes, paletteOptions: [], handleRadio: null });
  • Retornar com o as UsePaletteBar (return { clientsPalettes, paletteOptions: [], handleRadio: null } as UsePaletteBar).

E na tipagem handleRadio(event: number): void; talvez seja melhor passar handleRadio: (event: number): void | undefined;, pode acabar exigindo que você faça mais verificações quando for manipular os dados, então depende de outros pontos do código.

Pelo que entendi é isso, mas qualquer coisa avise!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software