0

Eu estava tentando linkar o script da API do spotify no componente do React, mas quando vou usar a função "window.onSpotifyWebPlaybackSDKReady" ele mostra o erro:"property onSpotifyWebPlaybackSDKReady does not exist on type 'Window & typeOf globalThis", como se não reconhecesse o script.Como posso resolver isso ?

import React, { useEffect, useState } from 'react';

function SpotifyPlayer() {

    useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://sdk.scdn.co/spotify-player.js";
    script.async = true;
    document.body.appendChild(script);
    window.onSpotifyWebPlaybackSDKReady = () => {
      // do your spotify magic here.
    }
    }, []);
      
}

export default SpotifyPlayer;

OBS: o HTML principal está em uma pasta e o componente em outra, mas já tentei colocar o script tag no body do html principal e, ainda assim, ele não reconheceu a função no componente.

1 Resposta 1

0

onSpotifyWebPlaybackSDKReady não é uma propriedade do window, e como TypeScript tenta manter o seu código consistente com os tipos declarados, ele não está deixando você atribuir um valor para uma propriedade que ele não conhece.

Mas não tem muito o que fazer nesse caso, idealmente esse módulo teria que te dar um callback que não precisasse ser exposto no window, porém como ele funciona assim, você vai ter que fugir um pouco da metodologia do TypeScript para inserir essa propriedade a força.

Uma forma de fazer isso é fazendo um cast do tipo Window para any, que é um tipo dinâmico que aceita qualquer propriedade. Então você poderia escrever como

(window as any).onSpotifyWebPlaybackSDKReady = () => {
  // do your spotify magic here.
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .