typescript - Cómo manejar los parámetros de URL de React Router y TypeScript

En react router, estoy siguiendo el tutorial pero intentando usar TypeScript y tengo este código

let params = useParams();
let id:string = params.invoiceId
let invoice = getInvoice(parseInt(id, 10));

La segunda línea tiene un error

TS2322: Type 'string | undefined' is not assignable to type 'string'.   Type 'undefined' is not assignable to type 'string'

¿Cómo hago esto correctamente para buscar y mostrar la factura? Además, ¿cómo redirigir al comodín * si la cadena no es un número entero?

gracias, Dean

Respuesta #1

¿Cómo hago esto correctamente para buscar y mostrar la factura?

El parámetro de ruta invoiceId es potencialmente indefinido y está tipado como "string | undefined", por lo que tu tipo de id debería coincidir.

const params = useParams();
const id: string | undefined = params.invoiceId;

Dado que id ahora también puede estar indefinido, y parseInt espera un tipo string, puedes:

1. Usa una cláusula de guardia:

   const invoice = id && getInvoice(parseInt(id, 10));
   

2. O usa el constructor Number que acepta un tipo any opcional:

   const invoice = getInvoice(Number(id));
   

Además, cómo redirigir al comodín * si la cadena no es un número entero.

Si quieres comprobar/probar primero el parámetro id para asegurarte de que es un número entero, puedes usar una expresión regular para verificar solo los caracteres numéricos y emitir una redirección imperativa.

Ejemplo :

const navigate = useNavigate();

...

useEffect(() => {
  if (id && /[^\d]/g.test(id)) {
    navigate("/", { replace: true });
  }
}, [id, navigate]);