Recibiré una url de accesorios que podría ser una cadena o una matriz de objetos como:
type VideoSrcProps = { url?: string; day?: string; }; interface OwnProps { url: VideoSrcProps[] | string; } Pero mi implementación no funciona porque recibo que Property 'url' does not exist on type 'string | VideoSrcProps' Property 'url' does not exist on type 'string'
¿Cómo se debe cambiar?
Más código:
Estoy comprobando que vendrá una serie de cadenas como
const srcIsArray = Array.isArray(url) ? true : false; const notSingleArrayVideo = srcIsArray && url.length > 1 ? true : false;Y entonces
useEffect(() => { const preloadVideos = async () => { if (srcIsArray && notSingleArrayVideo) { const preloadedVideos = []; for (const video of url) { const response = await axios({ url: video?.url, method: 'GET', responseType: 'blob', }); const downloadedVideo = window.URL.createObjectURL(new Blob([response.data])); preloadedVideos.push({ url: downloadedVideo }); } if (preloadedVideos.length === url.length) { setPreloadedVideos(preloadedVideos); } } }; if (srcIsArray && notSingleArrayVideo) { preloadVideos(); } }, []); El problema es con url: video?.url
Tienes un error en esto:
const notSingleArrayVideo = srcIsArray && url.length > 1 ? true : false;
TS no restringirá su tipo cuando use un valor almacenado fuera de un ternario .
Debe usar la condición directamente en su declaración if , o hacer un if y regresar.
type VideoSrcProps = { url?: string; day?: string; }; interface OwnProps { url: VideoSrcProps[] | string; } function test (url: OwnProps) { if (Array.isArray(url.url)) { for (const video of url.url) { console.log(video.url); } } }