diff --git a/packages/@uppy/core/src/BasePlugin.ts b/packages/@uppy/core/src/BasePlugin.ts
index 513efba499a..0e2391f2bcb 100644
--- a/packages/@uppy/core/src/BasePlugin.ts
+++ b/packages/@uppy/core/src/BasePlugin.ts
@@ -15,7 +15,11 @@ import type { I18n, Locale } from '@uppy/utils/lib/Translator'
 import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
 import type { Uppy } from '.'
 
-export type PluginOpts = { locale?: Locale; [key: string]: unknown }
+export type PluginOpts = {
+  locale?: Locale
+  id?: string
+  [key: string]: unknown
+}
 
 export default class BasePlugin<
   Opts extends PluginOpts,
diff --git a/packages/@uppy/core/src/UIPlugin.ts b/packages/@uppy/core/src/UIPlugin.ts
index fd404d48cf0..163148cecbc 100644
--- a/packages/@uppy/core/src/UIPlugin.ts
+++ b/packages/@uppy/core/src/UIPlugin.ts
@@ -32,6 +32,11 @@ function debounce<T extends (...args: any[]) => any>(
   }
 }
 
+export interface UIPluginOptions extends PluginOpts {
+  replaceTargetContent?: boolean
+  direction?: 'ltr' | 'rtl'
+}
+
 /**
  * UIPlugin is the extended version of BasePlugin to incorporate rendering with Preact.
  * Use this for plugins that need a user interface.
@@ -39,7 +44,7 @@ function debounce<T extends (...args: any[]) => any>(
  * For plugins without an user interface, see BasePlugin.
  */
 class UIPlugin<
-  Opts extends PluginOpts & { direction?: 'ltr' | 'rtl' },
+  Opts extends UIPluginOptions,
   M extends Meta,
   B extends Body,
 > extends BasePlugin<Opts, M, B> {
@@ -51,6 +56,8 @@ class UIPlugin<
 
   parent: unknown
 
+  title: string
+
   getTargetPlugin(target: unknown): UIPlugin<any, any, any> | undefined {
     let targetPlugin
     if (typeof target === 'object' && target instanceof UIPlugin) {
diff --git a/packages/@uppy/core/src/Uppy.ts b/packages/@uppy/core/src/Uppy.ts
index 086448fc28e..0bc68069718 100644
--- a/packages/@uppy/core/src/Uppy.ts
+++ b/packages/@uppy/core/src/Uppy.ts
@@ -96,7 +96,7 @@ export interface State<M extends Meta, B extends Body>
   }
   currentUploads: Record<string, CurrentUpload<M, B>>
   allowNewUpload: boolean
-  recoveredState: null
+  recoveredState: null | State<M, B>
   error: string | null
   files: {
     [key: string]: UppyFile<M, B>
@@ -251,6 +251,7 @@ export interface _UppyEventMap<M extends Meta, B extends Body> {
   progress: ProgressCallback
   'reset-progress': GenericEventCallback
   restored: GenericEventCallback
+  'restore-confirmed': GenericEventCallback
   'restriction-failed': RestrictionFailedCallback<M, B>
   'resume-all': GenericEventCallback
   'retry-all': RetryAllCallback
@@ -546,7 +547,7 @@ export class Uppy<M extends Meta, B extends Body> {
   resetProgress(): void {
     const defaultProgress: Omit<FileProgressNotStarted, 'bytesTotal'> = {
       percentage: 0,
-      bytesUploaded: 0,
+      bytesUploaded: false,
       uploadComplete: false,
       uploadStarted: null,
     }
@@ -842,7 +843,9 @@ export class Uppy<M extends Meta, B extends Body> {
     meta.type = fileType
 
     // `null` means the size is unknown.
-    const size = Number.isFinite(file.data.size) ? file.data.size : null
+    const size = Number.isFinite(file.data.size)
+      ? file.data.size
+      : (null as never)
 
     return {
       source: file.source || '',
@@ -857,17 +860,15 @@ export class Uppy<M extends Meta, B extends Body> {
       data: file.data,
       progress: {
         percentage: 0,
-        bytesUploaded: 0,
+        bytesUploaded: false,
         bytesTotal: size,
         uploadComplete: false,
         uploadStarted: null,
-      } as FileProgressNotStarted,
+      },
       size,
       isGhost: false,
       isRemote: file.isRemote || false,
-      // TODO: this should not be a string
-      // @ts-expect-error wrong
-      remote: file.remote || '',
+      remote: file.remote,
       preview: file.preview,
     }
   }
diff --git a/packages/@uppy/core/src/index.ts b/packages/@uppy/core/src/index.ts
index 6fc0e758669..d218db2de9b 100644
--- a/packages/@uppy/core/src/index.ts
+++ b/packages/@uppy/core/src/index.ts
@@ -3,3 +3,5 @@ export { default as Uppy } from './Uppy.ts'
 export { default as UIPlugin } from './UIPlugin.ts'
 export { default as BasePlugin } from './BasePlugin.ts'
 export { debugLogger } from './loggers.ts'
+
+export type { UIPluginOptions } from './UIPlugin.ts'
diff --git a/packages/@uppy/status-bar/src/Components.jsx b/packages/@uppy/status-bar/src/Components.tsx
similarity index 70%
rename from packages/@uppy/status-bar/src/Components.jsx
rename to packages/@uppy/status-bar/src/Components.tsx
index 2f455e6c6b6..af9eeb96ccd 100644
--- a/packages/@uppy/status-bar/src/Components.jsx
+++ b/packages/@uppy/status-bar/src/Components.tsx
@@ -1,14 +1,31 @@
 import { h } from 'preact'
 import classNames from 'classnames'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore untyped
 import prettierBytes from '@transloadit/prettier-bytes'
 import prettyETA from '@uppy/utils/lib/prettyETA'
 
-import statusBarStates from './StatusBarStates.js'
+import statusBarStates from './StatusBarStates.ts'
+import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
+import type { State, Uppy } from '@uppy/core/src/Uppy.ts'
+import type { FileProcessingInfo } from '@uppy/utils/lib/FileProgress'
 
 const DOT = `\u00B7`
 const renderDot = () => ` ${DOT} `
 
-function UploadBtn (props) {
+interface UploadBtnProps<M extends Meta, B extends Body> {
+  newFiles: number
+  isUploadStarted: boolean
+  recoveredState: null | State<M, B>
+  i18n: Uppy<M, B>['i18n']
+  uploadState: string
+  isSomeGhost: boolean
+  startUpload: () => void
+}
+
+function UploadBtn<M extends Meta, B extends Body>(
+  props: UploadBtnProps<M, B>,
+) {
   const {
     newFiles,
     isUploadStarted,
@@ -30,9 +47,10 @@ function UploadBtn (props) {
     { 'uppy-StatusBar-actionBtn--disabled': isSomeGhost },
   )
 
-  const uploadBtnText = newFiles && isUploadStarted && !recoveredState
-    ? i18n('uploadXNewFiles', { smart_count: newFiles })
-    : i18n('uploadXFiles', { smart_count: newFiles })
+  const uploadBtnText =
+    newFiles && isUploadStarted && !recoveredState
+      ? i18n('uploadXNewFiles', { smart_count: newFiles })
+      : i18n('uploadXFiles', { smart_count: newFiles })
 
   return (
     <button
@@ -48,7 +66,12 @@ function UploadBtn (props) {
   )
 }
 
-function RetryBtn (props) {
+interface RetryBtnProps<M extends Meta, B extends Body> {
+  i18n: Uppy<M, B>['i18n']
+  uppy: Uppy<M, B>
+}
+
+function RetryBtn<M extends Meta, B extends Body>(props: RetryBtnProps<M, B>) {
   const { i18n, uppy } = props
 
   return (
@@ -56,7 +79,11 @@ function RetryBtn (props) {
       type="button"
       className="uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--retry"
       aria-label={i18n('retryUpload')}
-      onClick={() => uppy.retryAll().catch(() => { /* Error reported and handled via an event */ })}
+      onClick={() =>
+        uppy.retryAll().catch(() => {
+          /* Error reported and handled via an event */
+        })
+      }
       data-uppy-super-focusable
       data-cy="retry"
     >
@@ -75,7 +102,14 @@ function RetryBtn (props) {
   )
 }
 
-function CancelBtn (props) {
+interface CancelBtnProps<M extends Meta, B extends Body> {
+  i18n: Uppy<M, B>['i18n']
+  uppy: Uppy<M, B>
+}
+
+function CancelBtn<M extends Meta, B extends Body>(
+  props: CancelBtnProps<M, B>,
+) {
   const { i18n, uppy } = props
 
   return (
@@ -108,11 +142,21 @@ function CancelBtn (props) {
   )
 }
 
-function PauseResumeButton (props) {
+interface PauseResumeButtonProps<M extends Meta, B extends Body> {
+  i18n: Uppy<M, B>['i18n']
+  uppy: Uppy<M, B>
+  isAllPaused: boolean
+  isAllComplete: boolean
+  resumableUploads: boolean
+}
+
+function PauseResumeButton<M extends Meta, B extends Body>(
+  props: PauseResumeButtonProps<M, B>,
+) {
   const { isAllPaused, i18n, isAllComplete, resumableUploads, uppy } = props
   const title = isAllPaused ? i18n('resume') : i18n('pause')
 
-  function togglePauseResume () {
+  function togglePauseResume() {
     if (isAllComplete) return null
 
     if (!resumableUploads) {
@@ -160,14 +204,19 @@ function PauseResumeButton (props) {
   )
 }
 
-function DoneBtn (props) {
+interface DoneBtnProps<M extends Meta, B extends Body> {
+  i18n: Uppy<M, B>['i18n']
+  doneButtonHandler: (() => void) | null
+}
+
+function DoneBtn<M extends Meta, B extends Body>(props: DoneBtnProps<M, B>) {
   const { i18n, doneButtonHandler } = props
 
   return (
     <button
       type="button"
       className="uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--done"
-      onClick={doneButtonHandler}
+      onClick={doneButtonHandler!}
       data-uppy-super-focusable
     >
       {i18n('done')}
@@ -175,7 +224,7 @@ function DoneBtn (props) {
   )
 }
 
-function LoadingSpinner () {
+function LoadingSpinner() {
   return (
     <svg
       className="uppy-StatusBar-spinner"
@@ -192,10 +241,14 @@ function LoadingSpinner () {
   )
 }
 
-function ProgressBarProcessing (props) {
+interface ProgressBarProcessingProps {
+  progress: FileProcessingInfo
+}
+
+function ProgressBarProcessing(props: ProgressBarProcessingProps) {
   const { progress } = props
   const { value, mode, message } = progress
-  const roundedValue = Math.round(value * 100)
+  const roundedValue = Math.round(value! * 100)
   const dot = `\u00B7`
 
   return (
@@ -207,22 +260,27 @@ function ProgressBarProcessing (props) {
   )
 }
 
-function ProgressDetails (props) {
-  const {
-    numUploads,
-    complete,
-    totalUploadedSize,
-    totalSize,
-    totalETA,
-    i18n,
-  } = props
+interface ProgressDetailsProps<M extends Meta, B extends Body> {
+  i18n: Uppy<M, B>['i18n']
+  numUploads: number
+  complete: number
+  totalUploadedSize: number
+  totalSize: number
+  totalETA: number
+}
+
+function ProgressDetails<M extends Meta, B extends Body>(
+  props: ProgressDetailsProps<M, B>,
+) {
+  const { numUploads, complete, totalUploadedSize, totalSize, totalETA, i18n } =
+    props
 
   const ifShowFilesUploadedOfTotal = numUploads > 1
 
   return (
     <div className="uppy-StatusBar-statusSecondary">
-      {ifShowFilesUploadedOfTotal
-        && i18n('filesUploadedOfTotal', {
+      {ifShowFilesUploadedOfTotal &&
+        i18n('filesUploadedOfTotal', {
           complete,
           smart_count: numUploads,
         })}
@@ -248,7 +306,15 @@ function ProgressDetails (props) {
   )
 }
 
-function FileUploadCount (props) {
+interface FileUploadCountProps<M extends Meta, B extends Body> {
+  i18n: Uppy<M, B>['i18n']
+  complete: number
+  numUploads: number
+}
+
+function FileUploadCount<M extends Meta, B extends Body>(
+  props: FileUploadCountProps<M, B>,
+) {
   const { i18n, complete, numUploads } = props
 
   return (
@@ -258,7 +324,15 @@ function FileUploadCount (props) {
   )
 }
 
-function UploadNewlyAddedFiles (props) {
+interface UploadNewlyAddedFilesProps<M extends Meta, B extends Body> {
+  i18n: Uppy<M, B>['i18n']
+  newFiles: number
+  startUpload: () => void
+}
+
+function UploadNewlyAddedFiles<M extends Meta, B extends Body>(
+  props: UploadNewlyAddedFilesProps<M, B>,
+) {
   const { i18n, newFiles, startUpload } = props
   const uploadBtnClassNames = classNames(
     'uppy-u-reset',
@@ -284,7 +358,26 @@ function UploadNewlyAddedFiles (props) {
   )
 }
 
-function ProgressBarUploading (props) {
+interface ProgressBarUploadingProps<M extends Meta, B extends Body> {
+  i18n: Uppy<M, B>['i18n']
+  supportsUploadProgress: boolean
+  totalProgress: number
+  showProgressDetails?: boolean
+  isUploadStarted: boolean
+  isAllComplete: boolean
+  isAllPaused: boolean
+  newFiles: number
+  numUploads: number
+  complete: number
+  totalUploadedSize: number
+  totalSize: number
+  totalETA: number
+  startUpload: () => void
+}
+
+function ProgressBarUploading<M extends Meta, B extends Body>(
+  props: ProgressBarUploadingProps<M, B>,
+) {
   const {
     i18n,
     supportsUploadProgress,
@@ -310,7 +403,7 @@ function ProgressBarUploading (props) {
 
   const title = isAllPaused ? i18n('paused') : i18n('uploading')
 
-  function renderProgressDetails () {
+  function renderProgressDetails() {
     if (!isAllPaused && !showUploadNewlyAddedFiles && showProgressDetails) {
       if (supportsUploadProgress) {
         return (
@@ -357,7 +450,13 @@ function ProgressBarUploading (props) {
   )
 }
 
-function ProgressBarComplete (props) {
+interface ProgressBarCompleteProps<M extends Meta, B extends Body> {
+  i18n: Uppy<M, B>['i18n']
+}
+
+function ProgressBarComplete<M extends Meta, B extends Body>(
+  props: ProgressBarCompleteProps<M, B>,
+) {
   const { i18n } = props
 
   return (
@@ -385,10 +484,19 @@ function ProgressBarComplete (props) {
   )
 }
 
-function ProgressBarError (props) {
+interface ProgressBarErrorProps<M extends Meta, B extends Body> {
+  i18n: Uppy<M, B>['i18n']
+  error: any
+  complete: number
+  numUploads: number
+}
+
+function ProgressBarError<M extends Meta, B extends Body>(
+  props: ProgressBarErrorProps<M, B>,
+) {
   const { error, i18n, complete, numUploads } = props
 
-  function displayErrorAlert () {
+  function displayErrorAlert() {
     const errorMessage = `${i18n('uploadFailed')} \n\n ${error}`
     // eslint-disable-next-line no-alert
     alert(errorMessage) // TODO: move to custom alert implementation
@@ -422,7 +530,11 @@ function ProgressBarError (props) {
           </button>
         </div>
 
-        <FileUploadCount i18n={i18n} complete={complete} numUploads={numUploads} />
+        <FileUploadCount
+          i18n={i18n}
+          complete={complete}
+          numUploads={numUploads}
+        />
       </div>
     </div>
   )
diff --git a/packages/@uppy/status-bar/src/StatusBar.jsx b/packages/@uppy/status-bar/src/StatusBar.tsx
similarity index 71%
rename from packages/@uppy/status-bar/src/StatusBar.jsx
rename to packages/@uppy/status-bar/src/StatusBar.tsx
index 0cf8491e887..f1ba16f5ee8 100644
--- a/packages/@uppy/status-bar/src/StatusBar.jsx
+++ b/packages/@uppy/status-bar/src/StatusBar.tsx
@@ -1,16 +1,25 @@
-import { UIPlugin } from '@uppy/core'
+import { UIPlugin, type Uppy } from '@uppy/core'
 import emaFilter from '@uppy/utils/lib/emaFilter'
 import getTextDirection from '@uppy/utils/lib/getTextDirection'
-import statusBarStates from './StatusBarStates.js'
-import StatusBarUI from './StatusBarUI.jsx'
-
+import statusBarStates from './StatusBarStates.ts'
+import StatusBarUI, { type StatusBarUIProps } from './StatusBarUI.tsx'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore We don't want TS to generate types for the package.json
 import packageJson from '../package.json'
-import locale from './locale.js'
+import locale from './locale.ts'
+import type { StatusBarOptions } from './StatusBarOptions.ts'
+import type { Body, Meta, UppyFile } from '@uppy/utils/lib/UppyFile'
+import type { State } from '@uppy/core/src/Uppy.ts'
 
 const speedFilterHalfLife = 2000
 const ETAFilterHalfLife = 2000
 
-function getUploadingState (error, isAllComplete, recoveredState, files) {
+function getUploadingState(
+  error: any,
+  isAllComplete: boolean,
+  recoveredState: any,
+  files: Record<string, UppyFile<any, any>>,
+): StatusBarUIProps<any, any>['uploadState'] {
   if (error) {
     return statusBarStates.STATE_ERROR
   }
@@ -23,7 +32,8 @@ function getUploadingState (error, isAllComplete, recoveredState, files) {
     return statusBarStates.STATE_WAITING
   }
 
-  let state = statusBarStates.STATE_WAITING
+  let state: StatusBarUIProps<any, any>['uploadState'] =
+    statusBarStates.STATE_WAITING
   const fileIDs = Object.keys(files)
   for (let i = 0; i < fileIDs.length; i++) {
     const { progress } = files[fileIDs[i]]
@@ -33,16 +43,12 @@ function getUploadingState (error, isAllComplete, recoveredState, files) {
     }
     // If files are being preprocessed AND postprocessed at this time, we show the
     // preprocess state. If any files are being uploaded we show uploading.
-    if (progress.preprocess && state !== statusBarStates.STATE_UPLOADING) {
+    if (progress.preprocess) {
       state = statusBarStates.STATE_PREPROCESSING
     }
     // If NO files are being preprocessed or uploaded right now, but some files are
     // being postprocessed, show the postprocess state.
-    if (
-      progress.postprocess
-      && state !== statusBarStates.STATE_UPLOADING
-      && state !== statusBarStates.STATE_PREPROCESSING
-    ) {
+    if (progress.postprocess && state !== statusBarStates.STATE_PREPROCESSING) {
       state = statusBarStates.STATE_POSTPROCESSING
     }
   }
@@ -53,18 +59,22 @@ function getUploadingState (error, isAllComplete, recoveredState, files) {
  * StatusBar: renders a status bar with upload/pause/resume/cancel/retry buttons,
  * progress percentage and time remaining.
  */
-export default class StatusBar extends UIPlugin {
+export default class StatusBar<M extends Meta, B extends Body> extends UIPlugin<
+  StatusBarOptions,
+  M,
+  B
+> {
   static VERSION = packageJson.version
 
-  #lastUpdateTime
+  #lastUpdateTime: ReturnType<typeof performance.now>
 
-  #previousUploadedBytes
+  #previousUploadedBytes: number | null
 
-  #previousSpeed
+  #previousSpeed: number | null
 
-  #previousETA
+  #previousETA: number | null
 
-  constructor (uppy, opts) {
+  constructor(uppy: Uppy<M, B>, opts: StatusBarOptions) {
     super(uppy, opts)
     this.id = this.opts.id || 'StatusBar'
     this.title = 'StatusBar'
@@ -92,7 +102,11 @@ export default class StatusBar extends UIPlugin {
     this.install = this.install.bind(this)
   }
 
-  #computeSmoothETA (totalBytes) {
+  #computeSmoothETA(totalBytes: {
+    uploaded: number
+    total: number
+    remaining: number
+  }): number {
     if (totalBytes.total === 0 || totalBytes.remaining === 0) {
       return 0
     }
@@ -104,7 +118,8 @@ export default class StatusBar extends UIPlugin {
       return Math.round((this.#previousETA ?? 0) / 100) / 10
     }
 
-    const uploadedBytesSinceLastTick = totalBytes.uploaded - this.#previousUploadedBytes
+    const uploadedBytesSinceLastTick =
+      totalBytes.uploaded - this.#previousUploadedBytes!
     this.#previousUploadedBytes = totalBytes.uploaded
 
     // uploadedBytesSinceLastTick can be negative in some cases (packet loss?)
@@ -113,29 +128,31 @@ export default class StatusBar extends UIPlugin {
       return Math.round((this.#previousETA ?? 0) / 100) / 10
     }
     const currentSpeed = uploadedBytesSinceLastTick / dt
-    const filteredSpeed = this.#previousSpeed == null
-      ? currentSpeed
-      : emaFilter(currentSpeed, this.#previousSpeed, speedFilterHalfLife, dt)
+    const filteredSpeed =
+      this.#previousSpeed == null
+        ? currentSpeed
+        : emaFilter(currentSpeed, this.#previousSpeed, speedFilterHalfLife, dt)
     this.#previousSpeed = filteredSpeed
     const instantETA = totalBytes.remaining / filteredSpeed
 
-    const updatedPreviousETA = Math.max(this.#previousETA - dt, 0)
-    const filteredETA = this.#previousETA == null
-      ? instantETA
-      : emaFilter(instantETA, updatedPreviousETA, ETAFilterHalfLife, dt)
+    const updatedPreviousETA = Math.max(this.#previousETA! - dt, 0)
+    const filteredETA =
+      this.#previousETA == null
+        ? instantETA
+        : emaFilter(instantETA, updatedPreviousETA, ETAFilterHalfLife, dt)
     this.#previousETA = filteredETA
     this.#lastUpdateTime = performance.now()
 
     return Math.round(filteredETA / 100) / 10
   }
 
-  startUpload = () => {
-    return this.uppy.upload().catch(() => {
+  startUpload = (): ReturnType<Uppy<M, B>['upload']> => {
+    return this.uppy.upload().catch((() => {
       // Error logged in Core
-    })
+    }) as () => undefined)
   }
 
-  render (state) {
+  render(state: State<M, B>) {
     const {
       capabilities,
       files,
@@ -161,9 +178,7 @@ export default class StatusBar extends UIPlugin {
     // If some state was recovered, we want to show Upload button/counter
     // for all the files, because in this case it’s not an Upload button,
     // but “Confirm Restore Button”
-    const newFilesOrRecovered = recoveredState
-      ? Object.values(files)
-      : newFiles
+    const newFilesOrRecovered = recoveredState ? Object.values(files) : newFiles
     const resumableUploads = !!capabilities.resumableUploads
     const supportsUploadProgress = capabilities.uploadProgress !== false
 
@@ -194,6 +209,7 @@ export default class StatusBar extends UIPlugin {
       totalUploadedSize,
       isAllComplete: false,
       isAllPaused,
+      // @ts-expect-error TODO: remove this in 4.x branch
       isAllErrored,
       isUploadStarted,
       isUploadInProgress,
@@ -216,16 +232,17 @@ export default class StatusBar extends UIPlugin {
       hidePauseResumeButton: this.opts.hidePauseResumeButton,
       hideCancelButton: this.opts.hideCancelButton,
       hideAfterFinish: this.opts.hideAfterFinish,
+      // ts-expect-error TODO: remove this in 4.x branch
       isTargetDOMEl: this.isTargetDOMEl,
     })
   }
 
-  onMount () {
+  onMount() {
     // Set the text direction if the page has not defined one.
     const element = this.el
-    const direction = getTextDirection(element)
+    const direction = getTextDirection(element!)
     if (!direction) {
-      element.dir = 'ltr'
+      element!.dir = 'ltr'
     }
   }
 
@@ -235,8 +252,10 @@ export default class StatusBar extends UIPlugin {
     this.#previousSpeed = null
     this.#previousETA = null
     if (recoveredState) {
-      this.#previousUploadedBytes = Object.values(recoveredState.files)
-        .reduce((pv, { progress }) => pv + progress.bytesUploaded, 0)
+      this.#previousUploadedBytes = Object.values(recoveredState.files).reduce(
+        (pv, { progress }) => pv + (progress.bytesUploaded as number),
+        0,
+      )
 
       // We don't set `#lastUpdateTime` at this point because the upload won't
       // actually resume until the user asks for it.
@@ -248,7 +267,7 @@ export default class StatusBar extends UIPlugin {
     this.#previousUploadedBytes = 0
   }
 
-  install () {
+  install() {
     const { target } = this.opts
     if (target) {
       this.mount(target, this)
@@ -258,11 +277,12 @@ export default class StatusBar extends UIPlugin {
     // To cover the use case where the status bar is installed while the upload
     // has started, we set `lastUpdateTime` right away.
     this.#lastUpdateTime = performance.now()
-    this.#previousUploadedBytes = this.uppy.getFiles()
-      .reduce((pv, file) => pv + file.progress.bytesUploaded, 0)
+    this.#previousUploadedBytes = this.uppy
+      .getFiles()
+      .reduce((pv, file) => pv + (file.progress.bytesUploaded as number), 0)
   }
 
-  uninstall () {
+  uninstall() {
     this.unmount()
     this.uppy.off('upload', this.#onUploadStart)
   }
diff --git a/packages/@uppy/status-bar/src/StatusBarOptions.ts b/packages/@uppy/status-bar/src/StatusBarOptions.ts
new file mode 100644
index 00000000000..2993fc7a1b8
--- /dev/null
+++ b/packages/@uppy/status-bar/src/StatusBarOptions.ts
@@ -0,0 +1,14 @@
+import type { UIPluginOptions } from '@uppy/core'
+import type StatusBarLocale from './locale.ts'
+
+export interface StatusBarOptions extends UIPluginOptions {
+  target?: HTMLElement | string
+  showProgressDetails?: boolean
+  hideUploadButton?: boolean
+  hideAfterFinish?: boolean
+  hideRetryButton?: boolean
+  hidePauseResumeButton?: boolean
+  hideCancelButton?: boolean
+  doneButtonHandler?: (() => void) | null
+  locale?: typeof StatusBarLocale
+}
diff --git a/packages/@uppy/status-bar/src/StatusBarStates.js b/packages/@uppy/status-bar/src/StatusBarStates.js
deleted file mode 100644
index 5c63e88427b..00000000000
--- a/packages/@uppy/status-bar/src/StatusBarStates.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-  STATE_ERROR: 'error',
-  STATE_WAITING: 'waiting',
-  STATE_PREPROCESSING: 'preprocessing',
-  STATE_UPLOADING: 'uploading',
-  STATE_POSTPROCESSING: 'postprocessing',
-  STATE_COMPLETE: 'complete',
-}
diff --git a/packages/@uppy/status-bar/src/StatusBarStates.ts b/packages/@uppy/status-bar/src/StatusBarStates.ts
new file mode 100644
index 00000000000..21e439f5795
--- /dev/null
+++ b/packages/@uppy/status-bar/src/StatusBarStates.ts
@@ -0,0 +1,8 @@
+export default {
+  STATE_ERROR: 'error' as const,
+  STATE_WAITING: 'waiting' as const,
+  STATE_PREPROCESSING: 'preprocessing' as const,
+  STATE_UPLOADING: 'uploading' as const,
+  STATE_POSTPROCESSING: 'postprocessing' as const,
+  STATE_COMPLETE: 'complete' as const,
+}
diff --git a/packages/@uppy/status-bar/src/StatusBarUI.jsx b/packages/@uppy/status-bar/src/StatusBarUI.tsx
similarity index 71%
rename from packages/@uppy/status-bar/src/StatusBarUI.jsx
rename to packages/@uppy/status-bar/src/StatusBarUI.tsx
index a24924d492a..221a24286d8 100644
--- a/packages/@uppy/status-bar/src/StatusBarUI.jsx
+++ b/packages/@uppy/status-bar/src/StatusBarUI.tsx
@@ -1,7 +1,7 @@
 import { h } from 'preact'
 import classNames from 'classnames'
-import statusBarStates from './StatusBarStates.js'
-import calculateProcessingProgress from './calculateProcessingProgress.js'
+import statusBarStates from './StatusBarStates.ts'
+import calculateProcessingProgress from './calculateProcessingProgress.ts'
 
 import {
   UploadBtn,
@@ -13,7 +13,10 @@ import {
   ProgressBarError,
   ProgressBarUploading,
   ProgressBarComplete,
-} from './Components.jsx'
+} from './Components.tsx'
+import type { Body, Meta, UppyFile } from '@uppy/utils/lib/UppyFile'
+import type { BasePlugin, Uppy } from '@uppy/core'
+import type { State } from '@uppy/core/src/Uppy.ts'
 
 const {
   STATE_ERROR,
@@ -24,8 +27,48 @@ const {
   STATE_COMPLETE,
 } = statusBarStates
 
+export interface StatusBarUIProps<M extends Meta, B extends Body> {
+  newFiles: number
+  allowNewUpload: boolean
+  isUploadInProgress: boolean
+  isAllPaused: boolean
+  resumableUploads: boolean
+  error: any
+  hideUploadButton?: boolean
+  hidePauseResumeButton?: boolean
+  hideCancelButton?: boolean
+  hideRetryButton?: boolean
+  recoveredState: null | State<M, B>
+  uploadState:
+    | typeof STATE_ERROR
+    | typeof STATE_WAITING
+    | typeof STATE_PREPROCESSING
+    | typeof STATE_UPLOADING
+    | typeof STATE_POSTPROCESSING
+    | typeof STATE_COMPLETE
+  totalProgress: number
+  files: Record<string, UppyFile<M, B>>
+  supportsUploadProgress: boolean
+  hideAfterFinish?: boolean
+  isSomeGhost: boolean
+  doneButtonHandler?: (() => void) | null
+  isUploadStarted: boolean
+  i18n: BasePlugin<any, M, B>['i18n']
+  startUpload: () => void
+  uppy: Uppy<M, B>
+  isAllComplete: boolean
+  showProgressDetails?: boolean
+  numUploads: number
+  complete: number
+  totalSize: number
+  totalETA: number
+  totalUploadedSize: number
+}
+
 // TODO: rename the function to StatusBarUI on the next major.
-export default function StatusBar (props) {
+export default function StatusBar<M extends Meta, B extends Body>(
+  props: StatusBarUIProps<M, B>,
+) {
   const {
     newFiles,
     allowNewUpload,
@@ -58,7 +101,7 @@ export default function StatusBar (props) {
     totalUploadedSize,
   } = props
 
-  function getProgressValue () {
+  function getProgressValue() {
     switch (uploadState) {
       case STATE_POSTPROCESSING:
       case STATE_PREPROCESSING: {
@@ -83,7 +126,7 @@ export default function StatusBar (props) {
     }
   }
 
-  function getIsIndeterminate () {
+  function getIsIndeterminate() {
     switch (uploadState) {
       case STATE_POSTPROCESSING:
       case STATE_PREPROCESSING: {
@@ -101,7 +144,7 @@ export default function StatusBar (props) {
     }
   }
 
-  function getIsHidden () {
+  function getIsHidden() {
     if (recoveredState) {
       return false
     }
@@ -122,20 +165,23 @@ export default function StatusBar (props) {
 
   const width = progressValue ?? 100
 
-  const showUploadBtn = !error
-    && newFiles
-    && !isUploadInProgress
-    && !isAllPaused
-    && allowNewUpload
-    && !hideUploadButton
+  const showUploadBtn =
+    !error &&
+    newFiles &&
+    !isUploadInProgress &&
+    !isAllPaused &&
+    allowNewUpload &&
+    !hideUploadButton
 
-  const showCancelBtn = !hideCancelButton
-    && uploadState !== STATE_WAITING
-    && uploadState !== STATE_COMPLETE
+  const showCancelBtn =
+    !hideCancelButton &&
+    uploadState !== STATE_WAITING &&
+    uploadState !== STATE_COMPLETE
 
-  const showPauseResumeBtn = resumableUploads
-    && !hidePauseResumeButton
-    && uploadState === STATE_UPLOADING
+  const showPauseResumeBtn =
+    resumableUploads &&
+    !hidePauseResumeButton &&
+    uploadState === STATE_UPLOADING
 
   const showRetryBtn = error && !isAllComplete && !hideRetryButton
 
@@ -159,16 +205,20 @@ export default function StatusBar (props) {
         role="progressbar"
         aria-label={`${width}%`}
         aria-valuetext={`${width}%`}
-        aria-valuemin="0"
-        aria-valuemax="100"
-        aria-valuenow={progressValue}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={progressValue!}
       />
 
       {(() => {
         switch (uploadState) {
           case STATE_PREPROCESSING:
           case STATE_POSTPROCESSING:
-            return <ProgressBarProcessing progress={calculateProcessingProgress(files)} />
+            return (
+              <ProgressBarProcessing
+                progress={calculateProcessingProgress(files)}
+              />
+            )
           case STATE_COMPLETE:
             return <ProgressBarComplete i18n={i18n} />
           case STATE_ERROR:
diff --git a/packages/@uppy/status-bar/src/calculateProcessingProgress.js b/packages/@uppy/status-bar/src/calculateProcessingProgress.ts
similarity index 53%
rename from packages/@uppy/status-bar/src/calculateProcessingProgress.js
rename to packages/@uppy/status-bar/src/calculateProcessingProgress.ts
index b205f5684aa..946d23bac88 100644
--- a/packages/@uppy/status-bar/src/calculateProcessingProgress.js
+++ b/packages/@uppy/status-bar/src/calculateProcessingProgress.ts
@@ -1,14 +1,19 @@
-export default function calculateProcessingProgress (files) {
-  const values = []
-  let mode
-  let message
+import type { FileProcessingInfo } from '@uppy/utils/lib/FileProgress'
+import type { UppyFile } from '@uppy/utils/lib/UppyFile'
+
+export default function calculateProcessingProgress(
+  files: Record<string, UppyFile<any, any>>,
+): FileProcessingInfo {
+  const values: number[] = []
+  let mode: FileProcessingInfo['mode'] = 'indeterminate'
+  let message: FileProcessingInfo['message']
 
   for (const { progress } of Object.values(files)) {
     const { preprocess, postprocess } = progress
     // In the future we should probably do this differently. For now we'll take the
     // mode and message from the first file…
     if (message == null && (preprocess || postprocess)) {
-      ({ mode, message } = preprocess || postprocess)
+      ;({ mode, message } = preprocess || postprocess!) // eslint-disable-line @typescript-eslint/no-non-null-assertion
     }
     if (preprocess?.mode === 'determinate') values.push(preprocess.value)
     if (postprocess?.mode === 'determinate') values.push(postprocess.value)
@@ -22,5 +27,5 @@ export default function calculateProcessingProgress (files) {
     mode,
     message,
     value,
-  }
+  } as FileProcessingInfo
 }
diff --git a/packages/@uppy/status-bar/src/index.js b/packages/@uppy/status-bar/src/index.js
deleted file mode 100644
index a454a21d5c9..00000000000
--- a/packages/@uppy/status-bar/src/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './StatusBar.jsx'
diff --git a/packages/@uppy/status-bar/src/index.ts b/packages/@uppy/status-bar/src/index.ts
new file mode 100644
index 00000000000..cb2777c4968
--- /dev/null
+++ b/packages/@uppy/status-bar/src/index.ts
@@ -0,0 +1,2 @@
+export { default } from './StatusBar.tsx'
+export type { StatusBarOptions } from './StatusBarOptions.ts'
diff --git a/packages/@uppy/status-bar/src/locale.js b/packages/@uppy/status-bar/src/locale.ts
similarity index 94%
rename from packages/@uppy/status-bar/src/locale.js
rename to packages/@uppy/status-bar/src/locale.ts
index 091f1d8704f..33aadfd9098 100644
--- a/packages/@uppy/status-bar/src/locale.js
+++ b/packages/@uppy/status-bar/src/locale.ts
@@ -1,3 +1,5 @@
+import type { Locale } from '@uppy/utils/lib/Translator'
+
 export default {
   strings: {
     // Shown in the status bar while files are being uploaded.
@@ -45,5 +47,5 @@ export default {
       1: '%{smart_count} more files added',
     },
     showErrorDetails: 'Show error details',
-  },
-}
+  } as Locale<0 | 1>['strings'],
+} as any as Locale
diff --git a/packages/@uppy/status-bar/tsconfig.build.json b/packages/@uppy/status-bar/tsconfig.build.json
new file mode 100644
index 00000000000..09128c41350
--- /dev/null
+++ b/packages/@uppy/status-bar/tsconfig.build.json
@@ -0,0 +1,24 @@
+{
+  "extends": "../../../tsconfig.shared",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "rootDir": "./src",
+    "resolveJsonModule": false,
+    "noImplicitAny": false,
+    "skipLibCheck": true
+  },
+  "include": [
+    "./src/**/*.*"
+  ],
+  "exclude": [
+    "./src/**/*.test.ts"
+  ],
+  "references": [
+    {
+      "path": "../utils/tsconfig.build.json"
+    },
+    {
+      "path": "../core/tsconfig.build.json"
+    }
+  ]
+}
diff --git a/packages/@uppy/status-bar/tsconfig.json b/packages/@uppy/status-bar/tsconfig.json
new file mode 100644
index 00000000000..41eef1e9bb4
--- /dev/null
+++ b/packages/@uppy/status-bar/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../../tsconfig.shared",
+  "compilerOptions": {
+    "emitDeclarationOnly": false,
+    "noEmit": true
+  },
+  "include": [
+    "./package.json",
+    "./src/**/*.*"
+  ],
+  "references": [
+    {
+      "path": "../utils/tsconfig.build.json"
+    },
+    {
+      "path": "../core/tsconfig.build.json"
+    }
+  ]
+}
diff --git a/packages/@uppy/utils/src/FileProgress.ts b/packages/@uppy/utils/src/FileProgress.ts
index 33235981ece..b21a2b1f0b1 100644
--- a/packages/@uppy/utils/src/FileProgress.ts
+++ b/packages/@uppy/utils/src/FileProgress.ts
@@ -1,10 +1,24 @@
+export interface DeterminateFileProcessing {
+  mode: 'determinate'
+  message: string
+  value: number
+}
+export interface IndeterminateFileProcessing {
+  mode: 'indeterminate'
+  message?: undefined
+  value?: 0
+}
+export type FileProcessingInfo =
+  | IndeterminateFileProcessing
+  | DeterminateFileProcessing
+
 interface FileProgressBase {
   progress?: number
   uploadComplete: boolean
   percentage: number
   bytesTotal: number
-  preprocess?: { mode: string; message?: string; value?: number }
-  postprocess?: { mode: string; message?: string; value?: number }
+  preprocess?: FileProcessingInfo
+  postprocess?: FileProcessingInfo
 }
 
 // FileProgress is either started or not started. We want to make sure TS doesn't