TypeScript: interface > type

frontend/src/Waveform.tsx

@@ -4,43 +4,43 @@ import { Thumbnails } from './Waveform/Thumbnails';
 import { Canvas as WaveformCanvas } from './Waveform/Canvas';
 import { canvasXToFrame, mouseEventToCanvasX } from './Waveform/Helpers';
 
-type Props = {
+interface Props {
   audioContext: AudioContext;
-};
+}
 
 // Audio corresponds to media.Audio.
-export type Audio = {
+export interface Audio {
   bytes: number;
   channels: number;
   frames: number;
   sampleRate: number;
-};
+}
 
 // Video corresponds to media.Video.
-export type Video = {
+export interface Video {
   bytes: number;
   thumbnailWidth: number;
   thumbnailHeight: number;
   durationMillis: number;
-};
+}
 
 // MediaSet corresponds to media.MediaSet.
-export type MediaSet = {
+export interface MediaSet {
   id: string;
   source: string;
   audio: Audio;
   video: Video;
-};
+}
 
-export type Selection = {
+export interface Selection {
   x1: number;
   x2: number;
-};
+}
 
-type ZoomSettings = {
+interface ZoomSettings {
   startFrame: number;
   endFrame: number;
-};
+}
 
 const defaultZoomSettings: ZoomSettings = { startFrame: 0, endFrame: 0 };
 

frontend/src/Waveform/Canvas.tsx

@@ -3,12 +3,12 @@ import { CanvasLogicalWidth, CanvasLogicalHeight } from '../Waveform';
 
 const maxPeakValue = 32_768;
 
-type Props = {
+interface Props {
   peaks: number[][] | null;
   strokeStyle: string;
   fillStyle: string;
   style: React.CSSProperties;
-};
+}
 
 // Canvas is a generic component that renders a waveform to a canvas.
 //

frontend/src/Waveform/Overview.tsx

@@ -7,13 +7,13 @@ import {
 } from '../Waveform';
 import { mouseEventToCanvasX } from './Helpers';
 
-type Props = {
+interface Props {
   peaks: number[][] | null;
   numFrames: number;
   style: React.CSSProperties;
   onSelectionStart: (x1: number) => void;
   onSelectionChange: (selection: Selection) => void;
-};
+}
 
 enum Mode {
   Normal,