Issue with Status Typing about react-sound HOT 5 OPEN

Had an idea immediately after writing this: I changed the file to plain js rather than ts. It compiled without issue; this must be an issue with this component and ts.

from react-sound.

I am facing the same issue :
Property 'status' does not exist on type 'ComponentClass<ReactSoundProps, any>'
playStatus={status ? Sound.status.PLAYING : Sound.status.PAUSED}

from react-sound.

I tried several things : I think in nodes_modules/@types/react-sound/index.d.ts, something like this is missing (it resolves this error but I don't really know if it is a good practise):

interface Status {
status: any
}

declare const ReactSound: React.ComponentClass<ReactSoundProps> & Status

from react-sound.

I don't suppose there was ever a fix/work around for this? I've just run into this issue in v1.2.2 (typescript 3.7.2)

from react-sound.

I solved this as follows.

import React, { useState } from 'react';
import Sound, { ReactSoundProps } from 'react-sound';
import './App.css';

function App() {
  const [status, setStatus] = useState<ReactSoundProps['playStatus']>('STOPPED');

  function togglePlayStatus() {
    setStatus(status => status === 'STOPPED' ? 'PLAYING' : 'STOPPED')
  }

  function statusLabel(status: ReactSoundProps['playStatus']): string {
    switch(status) {
      case 'STOPPED':
        return 'PLAY';
      case 'PLAYING':
        return 'STOP';
      default:
        return 'STOP';
    }
  }

  return (
    <div className="App">
      <button onClick={(click) => togglePlayStatus()}>{statusLabel(status)}</button>
      <Sound
        url="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3"
        playStatus={status}
      />
    </div>
  );
}

export default App;

from react-sound.