typescript - ¿Cuál es la diferencia entre "?" y "| undefined"?

Me pregunto, ¿hay alguna diferencia (real o en cuanto a mejores prácticas) entre

interface Fruit {
  cost?: number;
}

y

interface Fruit {
  cost: number | undefined;
}

Si hay una diferencia real en términos de comportamiento, ¿cuál es?

Si no lo hay, ¿por qué alguien preferiría | undefined o ?: (o viceversa)?

Un poco confundido porque he visto ambos, y no estoy seguro si en realidad hay una razón para preferir uno sobre el otro, o si es algo que simplemente se reduce a la preferencia.

¡Gracias!

Respuesta #1

Una diferencia es que cost: number | undefined; requiere que la propiedad exista y tenga un valor cuyo tipo sea number o undefined. En contraste, cost?: number permite que la propiedad no exista en absoluto.

Esto no se compila:

interface Fruit {
    cost: number | undefined;
}
const x: Fruit = {};

Para que funcione, tendrías que hacer:

interface Fruit {
    cost: number | undefined;
}
const x: Fruit = { cost: undefined };

Pero esto tiene éxito:

interface Fruit {
    cost?: number;
}
const x: Fruit = {};

Escribir explícitamente undefined puede ser tedioso cuando hay una alternativa disponible, por lo que probablemente prefieras la opción cost?: number.