Dado este fragmento de un componente React:
const AccountInformation = (props: { readonly accountData: AccountData | undefined | null }) => { const hasMultipleAccounts: boolean = props.accountData?.customerAccounts?.length === 1 ? false : true ... ¿Por qué Typescript se queja de que props.accountData?.customerAccounts?.length posiblemente no está definido cuando verifico si es mayor que 0 (> 0) pero el error desaparece cuando verifico si es igual a 1 (=== 1) ?
¿Es este un caso en el que JS está haciendo algo extraño con una propiedad indefinida que se interpreta como 0?
Escribirlo de esta manera elimina el error, pero estoy tratando de entender el comportamiento.
const hasMultipleAccounts: boolean = props.accountData?.customerAccounts?.length ?? 0 > 1 ? : true : falseMás simplemente, está preguntando por qué TypeScript se queja de la segunda de estas declaraciones:
console.log(undefined === 1); // false console.log(undefined > 0); // ^−−−− Object is possibly 'undefined'.(2532) ... porque cualquier operación de acceso a la propiedad con encadenamiento opcional tiene undefined como uno de sus posibles valores de resultado.
=== es más general que > es. === se usa para ver si el tipo de valor de los operandos coincide. Pero > se usa para comparar dos números o para comparar dos cadenas para ver si son "mayores" relativas. TypeScript también evita mezclar esos dos:
console.log("1" > 0); // ^−−− Operator '>' cannot be applied to types 'string' and 'number'.(2365) console.log(1 > "0""); // ^−−− Operator '>' cannot be applied to types 'number' and 'string'.(2365) En JavaScript, estamos (bastante) acostumbrados a la conversión implícita en estas situaciones, pero el trabajo de TypeScript es aplicar escritura estricta, por lo que la conversión implícita generalmente no está permitida. En JavaScript, undefined > 0 se convierte en NaN > 0 , lo cual es false (como lo es undefined <= 0 ). Pero TypeScript lo ve como el error que probablemente sea, y lo marca para usted.
( Enlace de juegos para todo lo anterior).
Si desea usar length > 0 , necesitará una fusión nula:
const i: number | undefined = undefined; if (i ?? 0 > 0) { }