Tengo un state , una interface y una function que procesa los datos de la API.
const [series, setSeries] = useState<ISeries[]>([]) export interface ITicket { status?: string status_desc?: string keyword_language?: string } interface ISeries { colorByPoint: boolean data: { name: string y: number status: string | undefined keyword_language: string | undefined }[] }función que procesa los datos api
function trans(series: ITicket[]) { const data = series.map(s => { return { **//api only reuturn either s.status_desc or s.keyword_language, only one** name: s.status_desc ? s.status_desc : s.keyword_language, y: s.ticket_count, status: s?.status, keyword_language: s?.keyword_language, } }) return [ { colorByPoint: true, data, }, ] } En la function que procesa los datos de la API, verifico qué valor se pasó para establecer la propiedad del name .
return { **//api only reuturn either s.status_desc or s.keyword_language, only one** name: s.status_desc ? s.status_desc : s.keyword_language, Pero luego aparece un error del compilador de TypeScript que no se puede asignar porque el name debe ser una string . Ahora existe la posibilidad de que pueda ser undefined .
Pregunta:
Estoy seguro de que la API pasará s.status_desc o s.keyword_language como una string . Entonces el nombre obtendrá un valor de cadena para asignar.
No quiero cambiar el tipo de name a string | undefined
No quiero usar TypeScript ignore ( @ts-ignore ) para pasar el error.
¿Cómo puedo deshacerme del error sin fingir?
tenga en cuenta: en la interfaz, no puedo cambiar el tipo de status_desc y keyword_language para omitirlo porque la API podría pasarme uno. Así que tengo que mantener el tipo como undefined para ambos casos.
Sugeriría simplemente lanzar la variable y agregar un comentario como este:
{ // Cast because server will always serv a string for at least one of the two name: (s.status_desc || s.keyword_language) as string, }Forma más sencilla: name: s.status_desc || s.keyword_language || ""
console.log(null || indefinido || "" || "asd" || ""); imprimirá "asd"
return { name: s.status_desc || s.keyword_language || "", y: s.ticket_count, status: s.status, keyword_language: s?.keyword_language, } Entonces, si por casualidad ambos campos son nulos o no están definidos, su código no fallará con un error al intentar acceder al name del campo nulo (será una cadena vacía)
¡O puede usar Non-Null Assertion Operator ! :
Considerado como una mala práctica, pero puede ayudar de todos modos.
name: s.status_desc! || s.keyword_language!