Fix Tone.js types by upgrading TypeScript and tslib

package.json

@@ -41,8 +41,8 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "tsdx": "^0.13.3",
-    "tslib": "^1.14.1",
-    "typescript": "^3.7.3"
+    "tslib": "^2.8.1",
+    "typescript": "^4.9.5"
   },
   "husky": {
     "hooks": {

src/components/Effect.tsx

@@ -33,6 +33,37 @@ export interface EffectConsumerProps extends EffectProps {
   onRemoveFromEffectsChain?: Function;
 }
 
+type EffectInstance = {
+  id?: string | number;
+  feedback?: {
+    value: number;
+  };
+  delay?: {
+    value: number;
+  };
+  delayTime?: {
+    value: string;
+  };
+  wet?: {
+    value: number;
+  };
+  low?: {
+    value: number;
+  };
+  mid?: {
+    value: number;
+  };
+  high?: {
+    value: number;
+  };
+  lowFrequency?: {
+    value: number;
+  };
+  highFrequency?: {
+    value: number;
+  };
+};
+
 const EffectConsumer: React.FC<EffectConsumerProps> = ({
   type,
   id,
@@ -47,67 +78,45 @@ const EffectConsumer: React.FC<EffectConsumerProps> = ({
   onAddToEffectsChain,
   onRemoveFromEffectsChain,
 }) => {
-  const effect = useRef<{
-    id: string | number;
-    feedback?: {
-      value: number;
-    };
-    delay?: {
-      value: number;
-    };
-    delayTime?: {
-      value: string;
-    };
-    wet?: {
-      value: number;
-    };
-    low?: {
-      value: number;
-    };
-    mid?: {
-      value: number;
-    };
-    high?: {
-      value: number;
-    };
-    lowFrequency?: {
-      value: number;
-    };
-    highFrequency?: {
-      value: number;
-    };
-  }>();
+  const effect = useRef<EffectInstance>();
 
   useEffect(() => {
     // console.log('<Effect /> mount');
     // console.log(`id: ${id}`);
 
     if (type === 'autoFilter') {
-      effect.current = new Tone.AutoFilter();
+      effect.current = (new Tone.AutoFilter() as unknown) as EffectInstance;
     } else if (type === 'autoPanner') {
-      effect.current = new Tone.AutoPanner();
+      effect.current = (new Tone.AutoPanner() as unknown) as EffectInstance;
     } else if (type === 'autoWah') {
-      effect.current = new Tone.AutoWah();
+      effect.current = (new Tone.AutoWah() as unknown) as EffectInstance;
     } else if (type === 'bitCrusher') {
-      effect.current = new Tone.BitCrusher();
+      effect.current = (new Tone.BitCrusher() as unknown) as EffectInstance;
       // Removed for now because delayTime has to be in ms
       // } else if (type === 'chorus') {
       //   effect.current = new Tone.Chorus();
     } else if (type === 'distortion') {
-      effect.current = new Tone.Distortion(0.5);
+      effect.current = (new Tone.Distortion(0.5) as unknown) as EffectInstance;
     } else if (type === 'feedbackDelay') {
-      effect.current = new Tone.FeedbackDelay(delayTime, feedback);
+      effect.current = (new Tone.FeedbackDelay(
+        delayTime,
+        feedback,
+      ) as unknown) as EffectInstance;
     } else if (type === 'freeverb') {
-      effect.current = new Tone.Freeverb();
+      effect.current = (new Tone.Freeverb() as unknown) as EffectInstance;
     } else if (type === 'panVol') {
-      effect.current = new Tone.PanVol();
+      effect.current = (new Tone.PanVol() as unknown) as EffectInstance;
       // Needs generate()
       // } else if (type === 'reverb') {
       //   effect.current = new Tone.Reverb();
     } else if (type === 'tremolo') {
-      effect.current = new Tone.Tremolo();
+      effect.current = (new Tone.Tremolo() as unknown) as EffectInstance;
     } else if (type === 'eq3') {
-      effect.current = new Tone.EQ3(low, mid, high);
+      effect.current = (new Tone.EQ3(
+        low,
+        mid,
+        high,
+      ) as unknown) as EffectInstance;
     }
 
     if (effect.current) {

src/components/Instrument.tsx

@@ -64,6 +64,19 @@ interface InstrumentConsumerProps extends InstrumentProps {
   onInstrumentsUpdate?: Function;
 }
 
+type InstrumentInstance = Partial<{
+  curve: number;
+  release: number;
+  triggerAttack: Function;
+  triggerAttackRelease: Function;
+  triggerRelease: Function;
+  add: Function;
+  set: Function;
+  chain: Function;
+  dispose: Function;
+  disconnect: Function;
+}>;
+
 const InstrumentConsumer: React.FC<InstrumentConsumerProps> = ({
   // <Instrument /> Props
   type = 'synth',
@@ -82,20 +95,7 @@ const InstrumentConsumer: React.FC<InstrumentConsumerProps> = ({
   effectsChain,
   onInstrumentsUpdate,
 }) => {
-  const instrumentRef = useRef<
-    Partial<{
-      curve: number;
-      release: number;
-      triggerAttack: Function;
-      triggerAttackRelease: Function;
-      triggerRelease: Function;
-      add: Function;
-      set: Function;
-      chain: Function;
-      dispose: Function;
-      disconnect: Function;
-    }>
-  >();
+  const instrumentRef = useRef<InstrumentInstance>();
   // const trackChannelBase = useRef(new Tone.PanVol(pan, volume));
   // const trackChannelBase = useRef(new Tone.Channel(volume, pan));
   const trackChannelBase = useRef(null);
@@ -125,7 +125,10 @@ const InstrumentConsumer: React.FC<InstrumentConsumerProps> = ({
 
   useEffect(() => {
     if (type === 'sampler') {
-      instrumentRef.current = new Tone.Sampler(samples, onLoad);
+      instrumentRef.current = (new Tone.Sampler(
+        samples,
+        (onLoad as unknown) as () => void,
+      ) as unknown) as InstrumentInstance;
 
       if (options && options.curve) {
         instrumentRef.current.curve = options.curve;
@@ -146,7 +149,7 @@ const InstrumentConsumer: React.FC<InstrumentConsumerProps> = ({
     } else if (type === 'noiseSynth') {
       instrumentRef.current = new Tone.NoiseSynth();
     } else if (type === 'pluckSynth') {
-      instrumentRef.current = new Tone.PluckSynth();
+      instrumentRef.current = (new Tone.PluckSynth() as unknown) as InstrumentInstance;
     } else {
       let synth;
 

src/components/Song.tsx

@@ -49,7 +49,7 @@ const Song: React.FC<SongProps> = ({
 
     transport.bpm.value = bpm;
     transport.swing = swing;
-    transport.swingSubdivision = swingSubdivision;
+    transport.swingSubdivision = swingSubdivision as typeof transport.swingSubdivision;
   }, [bpm, swing, swingSubdivision]);
 
   useEffect(() => {
@@ -59,7 +59,7 @@ const Song: React.FC<SongProps> = ({
       // Hack to get Tone to NOT use same settings from another instance
       transport.bpm.value = bpm;
       transport.swing = swing;
-      transport.swingSubdivision = swingSubdivision;
+      transport.swingSubdivision = swingSubdivision as typeof transport.swingSubdivision;
 
       transport.start();
     } else {

src/lib/utils.ts

@@ -37,6 +37,8 @@ export const isEqual = function(value, other) {
 				if (item1 !== item2) return false;
 			}
 		}
+
+		return true;
 	};
 
 	// Compare properties

src/types/index.d.ts

@@ -1,3 +1 @@
-declare module 'tone';
-
 declare module 'startaudiocontext';