TS strict mode (#5258)

Co-authored-by: Antoine du Hamel <antoine@transloadit.com>

packages/@uppy/audio/src/Audio.tsx

@@ -44,7 +44,7 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
-  #recordingLengthTimer: ReturnType<typeof setInterval>
+  #recordingLengthTimer?: ReturnType<typeof setInterval>
 
   private icon
 

packages/@uppy/audio/src/audio-oscilloscope/index.ts

@@ -42,16 +42,16 @@ export default class AudioOscilloscope {
 
   private bufferLength: number
 
-  private dataArray: Uint8Array
+  private dataArray?: Uint8Array
 
   // eslint-disable-next-line no-use-before-define
   private onDrawFrame: (oscilloscope: AudioOscilloscope) => void
 
   private streamSource?: MediaStreamAudioSourceNode
 
-  private audioContext: BaseAudioContext
+  private audioContext?: BaseAudioContext
 
-  public source: AudioBufferSourceNode
+  public source?: AudioBufferSourceNode
 
   constructor(
     canvas: HTMLCanvasElement,
@@ -98,7 +98,7 @@ export default class AudioOscilloscope {
     const h = this.height
 
     if (analyser) {
-      analyser.getByteTimeDomainData(dataArray)
+      analyser.getByteTimeDomainData(dataArray!)
     }
 
     ctx.fillRect(0, 0, w, h)
@@ -112,7 +112,7 @@ export default class AudioOscilloscope {
     }
 
     for (let i = 0; i < bufferLength; i++) {
-      const v = dataArray[i] / 128.0
+      const v = dataArray![i] / 128.0
       const y = v * (h / 2)
 
       if (i === 0) {

packages/@uppy/aws-s3/src/HTTPCommunicationQueue.ts

@@ -17,37 +17,37 @@ function removeMetadataFromURL(urlString: string) {
 }
 
 export class HTTPCommunicationQueue<M extends Meta, B extends Body> {
-  #abortMultipartUpload: WrapPromiseFunctionType<
+  #abortMultipartUpload!: WrapPromiseFunctionType<
     AwsS3Multipart<M, B>['abortMultipartUpload']
   >
 
   #cache = new WeakMap()
 
-  #createMultipartUpload: WrapPromiseFunctionType<
+  #createMultipartUpload!: WrapPromiseFunctionType<
     AwsS3Multipart<M, B>['createMultipartUpload']
   >
 
-  #fetchSignature: WrapPromiseFunctionType<AwsS3Multipart<M, B>['signPart']>
+  #fetchSignature!: WrapPromiseFunctionType<AwsS3Multipart<M, B>['signPart']>
 
-  #getUploadParameters: WrapPromiseFunctionType<
+  #getUploadParameters!: WrapPromiseFunctionType<
     AwsS3Multipart<M, B>['getUploadParameters']
   >
 
-  #listParts: WrapPromiseFunctionType<AwsS3Multipart<M, B>['listParts']>
+  #listParts!: WrapPromiseFunctionType<AwsS3Multipart<M, B>['listParts']>
 
-  #previousRetryDelay: number
+  #previousRetryDelay!: number
 
   #requests
 
-  #retryDelays: { values: () => Iterator<number> }
+  #retryDelays!: { values: () => Iterator<number> }
 
-  #sendCompletionRequest: WrapPromiseFunctionType<
+  #sendCompletionRequest!: WrapPromiseFunctionType<
     AwsS3Multipart<M, B>['completeMultipartUpload']
   >
 
   #setS3MultipartState
 
-  #uploadPartBytes: WrapPromiseFunctionType<uploadPartBytes>
+  #uploadPartBytes!: WrapPromiseFunctionType<uploadPartBytes>
 
   #getFile
 

packages/@uppy/aws-s3/src/MultipartUploader.ts

@@ -67,9 +67,9 @@ class MultipartUploader<M extends Meta, B extends Body> {
 
   #abortController = new AbortController()
 
-  #chunks: Array<Chunk | null>
+  #chunks: Array<Chunk | null> = []
 
-  #chunkState: { uploaded: number; etag?: string; done?: boolean }[]
+  #chunkState: { uploaded: number; etag?: string; done?: boolean }[] = []
 
   /**
    * The (un-chunked) data to upload.
@@ -131,7 +131,7 @@ class MultipartUploader<M extends Meta, B extends Body> {
     if (shouldUseMultipart && fileSize > this.#minPartSize) {
       // At least 5MB per request:
       let chunkSize = Math.max(
-        this.options.getChunkSize(this.#data),
+        this.options.getChunkSize(this.#data) as number, // Math.max can take undefined but TS does not think so
         this.#minPartSize,
       )
       let arraySize = Math.floor(fileSize / chunkSize)

packages/@uppy/aws-s3/src/index.ts

@@ -204,7 +204,7 @@ type AWSS3MultipartWithoutCompanionMandatorySignPart<
   ) => MaybePromise<AwsS3UploadParameters>
 }
 type AWSS3MultipartWithoutCompanionMandatory<M extends Meta, B extends Body> = {
-  getChunkSize?: (file: UppyFile<M, B>) => number
+  getChunkSize?: (file: { size: number }) => number
   createMultipartUpload: (file: UppyFile<M, B>) => MaybePromise<UploadResult>
   listParts: (
     file: UppyFile<M, B>,
@@ -314,7 +314,7 @@ export default class AwsS3Multipart<
 
   #companionCommunicationQueue
 
-  #client: RequestClient<M, B>
+  #client!: RequestClient<M, B>
 
   protected requests: any
 
@@ -530,7 +530,7 @@ export default class AwsS3Multipart<
       .then(assertServerError)
   }
 
-  #cachedTemporaryCredentials: MaybePromise<AwsS3STSResponse>
+  #cachedTemporaryCredentials?: MaybePromise<AwsS3STSResponse>
 
   async #getTemporarySecurityCredentials(options?: RequestOptions) {
     throwIfAborted(options?.signal)
@@ -859,7 +859,9 @@ export default class AwsS3Multipart<
 
         log: (...args: Parameters<Uppy<M, B>['log']>) => this.uppy.log(...args),
         getChunkSize:
-          this.opts.getChunkSize ? this.opts.getChunkSize.bind(this) : null,
+          this.opts.getChunkSize ?
+            this.opts.getChunkSize.bind(this)
+          : undefined,
 
         onProgress,
         onError,

packages/@uppy/box/src/Box.tsx

@@ -29,7 +29,7 @@ export default class Box<M extends Meta, B extends Body> extends UIPlugin<
 
   provider: Provider<M, B>
 
-  view: ProviderViews<M, B>
+  view!: ProviderViews<M, B>
 
   storage: typeof tokenStorage
 

packages/@uppy/drop-target/src/index.ts

@@ -42,7 +42,7 @@ export default class DropTarget<
 > {
   static VERSION = packageJson.version
 
-  private removeDragOverClassTimeout: ReturnType<typeof setTimeout>
+  private removeDragOverClassTimeout?: ReturnType<typeof setTimeout>
 
   private nodes?: Array<HTMLElement>
 

packages/@uppy/dropbox/src/Dropbox.tsx

@@ -29,7 +29,7 @@ export default class Dropbox<M extends Meta, B extends Body> extends UIPlugin<
 
   provider: Provider<M, B>
 
-  view: ProviderViews<M, B>
+  view!: ProviderViews<M, B>
 
   storage: typeof tokenStorage
 

packages/@uppy/facebook/src/Facebook.tsx

@@ -29,7 +29,7 @@ export default class Facebook<M extends Meta, B extends Body> extends UIPlugin<
 
   provider: Provider<M, B>
 
-  view: ProviderViews<M, B>
+  view!: ProviderViews<M, B>
 
   storage: typeof tokenStorage
 

packages/@uppy/file-input/src/FileInput.tsx

@@ -33,7 +33,7 @@ export default class FileInput<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
-  input: HTMLFileInputElement | null
+  input: HTMLFileInputElement | null = null
 
   constructor(uppy: Uppy<M, B>, opts?: FileInputOptions) {
     super(uppy, { ...defaultOptions, ...opts })

packages/@uppy/form/src/index.ts

@@ -50,7 +50,7 @@ export default class Form<M extends Meta, B extends Body> extends BasePlugin<
 > {
   static VERSION = packageJson.version
 
-  #form: HTMLFormElement
+  #form!: HTMLFormElement
 
   /**
    * Unfortunately Uppy isn't a state machine in which we can guarantee it's

packages/@uppy/golden-retriever/src/index.ts

@@ -60,7 +60,7 @@ export default class GoldenRetriever<
 
   IndexedDBStore: IndexedDBStore
 
-  savedPluginData: Record<string, unknown>
+  savedPluginData?: Record<string, unknown>
 
   constructor(uppy: Uppy<M, B>, opts?: GoldenRetrieverOptions) {
     super(uppy, { ...defaultOptions, ...opts })

packages/@uppy/google-drive/src/GoogleDrive.tsx

@@ -28,7 +28,7 @@ export default class GoogleDrive<
 
   provider: Provider<M, B>
 
-  view: ProviderViews<M, B>
+  view!: ProviderViews<M, B>
 
   storage: typeof tokenStorage
 

packages/@uppy/google-photos/src/GooglePhotos.tsx

@@ -28,7 +28,7 @@ export default class GooglePhotos<
 
   provider: Provider<M, B>
 
-  view: ProviderViews<M, B>
+  view!: ProviderViews<M, B>
 
   storage: typeof tokenStorage
 

packages/@uppy/image-editor/src/Editor.tsx

@@ -28,9 +28,9 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
   Props<M, B>,
   State
 > {
-  imgElement: HTMLImageElement
+  imgElement!: HTMLImageElement
 
-  cropper: Cropper
+  cropper!: Cropper
 
   constructor(props: Props<M, B>) {
     super(props)

packages/@uppy/image-editor/src/ImageEditor.tsx

@@ -110,7 +110,7 @@ export default class ImageEditor<
 > extends UIPlugin<InternalImageEditorOpts, M, B, PluginState<M, B>> {
   static VERSION = packageJson.version
 
-  cropper: Cropper
+  cropper!: Cropper
 
   constructor(uppy: Uppy<M, B>, opts?: Opts) {
     super(uppy, {

packages/@uppy/instagram/src/Instagram.tsx

@@ -29,7 +29,7 @@ export default class Instagram<M extends Meta, B extends Body> extends UIPlugin<
 
   provider: Provider<M, B>
 
-  view: ProviderViews<M, B>
+  view!: ProviderViews<M, B>
 
   storage: typeof tokenStorage
 

packages/@uppy/onedrive/src/OneDrive.tsx

@@ -29,7 +29,7 @@ export default class OneDrive<M extends Meta, B extends Body> extends UIPlugin<
 
   provider: Provider<M, B>
 
-  view: ProviderViews<M, B>
+  view!: ProviderViews<M, B>
 
   storage: typeof tokenStorage
 

packages/@uppy/provider-views/src/View.ts

@@ -46,9 +46,9 @@ export default class View<
 
   isHandlingScroll: boolean
 
-  requestClientId: string
+  requestClientId?: string
 
-  isShiftKeyPressed: boolean
+  isShiftKeyPressed: boolean = false
 
   lastCheckbox: CompanionFile | undefined
 
@@ -136,7 +136,7 @@ export default class View<
         },
         providerName: this.provider.name,
         provider: this.provider.provider,
-        requestClientId: this.requestClientId,
+        requestClientId: this.requestClientId!,
       },
     }
 

packages/@uppy/react/src/Dashboard.ts

@@ -25,9 +25,9 @@ export interface DashboardProps<M extends Meta, B extends Body>
 class Dashboard<M extends Meta, B extends Body> extends Component<
   DashboardProps<M, B>
 > {
-  private container: HTMLElement
+  private container!: HTMLElement
 
-  private plugin: UnknownPlugin<M, B>
+  private plugin!: UnknownPlugin<M, B>
 
   componentDidMount(): void {
     this.installPlugin()

packages/@uppy/react/src/DashboardModal.ts

@@ -31,9 +31,9 @@ class DashboardModal<M extends Meta, B extends Body> extends Component<
     onRequestClose: undefined,
   }
 
-  private container: HTMLElement
+  private container!: HTMLElement
 
-  private plugin: DashboardPlugin<M, B>
+  private plugin!: DashboardPlugin<M, B>
 
   componentDidMount(): void {
     this.installPlugin()

packages/@uppy/react/src/DragDrop.ts

@@ -18,9 +18,9 @@ interface DragDropProps<M extends Meta, B extends Body>
 class DragDrop<M extends Meta, B extends Body> extends Component<
   DragDropProps<M, B>
 > {
-  private container: HTMLElement
+  private container!: HTMLElement
 
-  private plugin: UnknownPlugin<M, B>
+  private plugin!: UnknownPlugin<M, B>
 
   componentDidMount(): void {
     this.installPlugin()

packages/@uppy/react/src/FileInput.ts

@@ -27,9 +27,9 @@ class FileInput<M extends Meta, B extends Body> extends Component<
     inputName: 'files[]',
   }
 
-  private container: HTMLElement
+  private container!: HTMLElement
 
-  private plugin: UnknownPlugin<M, B>
+  private plugin?: UnknownPlugin<M, B>
 
   componentDidMount(): void {
     this.installPlugin()
@@ -65,7 +65,7 @@ class FileInput<M extends Meta, B extends Body> extends Component<
   uninstallPlugin(props = this.props): void {
     const { uppy } = props
 
-    uppy.removePlugin(this.plugin)
+    uppy.removePlugin(this.plugin!)
   }
 
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types

packages/@uppy/react/src/ProgressBar.ts

@@ -17,9 +17,9 @@ interface ProgressBarProps<M extends Meta, B extends Body>
 class ProgressBar<M extends Meta, B extends Body> extends Component<
   ProgressBarProps<M, B>
 > {
-  private container: HTMLElement
+  private container!: HTMLElement
 
-  private plugin: UnknownPlugin<M, B>
+  private plugin!: UnknownPlugin<M, B>
 
   componentDidMount(): void {
     this.installPlugin()

packages/@uppy/react/src/StatusBar.ts

@@ -18,9 +18,9 @@ interface StatusBarProps<M extends Meta, B extends Body>
 class StatusBar<M extends Meta, B extends Body> extends Component<
   StatusBarProps<M, B>
 > {
-  private container: HTMLElement
+  private container!: HTMLElement
 
-  private plugin: UnknownPlugin<M, B>
+  private plugin!: UnknownPlugin<M, B>
 
   componentDidMount(): void {
     this.installPlugin()

packages/@uppy/screen-capture/src/RecorderScreen.tsx

@@ -20,7 +20,7 @@ type RecorderScreenProps<M extends Meta, B extends Body> = {
 class RecorderScreen<M extends Meta, B extends Body> extends Component<
   RecorderScreenProps<M, B>
 > {
-  videoElement: HTMLVideoElement | null
+  videoElement: HTMLVideoElement | null = null
 
   componentWillUnmount(): void {
     const { onStop } = this.props

packages/@uppy/screen-capture/src/ScreenCapture.tsx

@@ -83,17 +83,17 @@ export default class ScreenCapture<
     type: string
   }
 
-  videoStream: null | MediaStream
+  videoStream: null | MediaStream = null
 
-  audioStream: null | MediaStream
+  audioStream: null | MediaStream = null
 
-  userDenied: boolean
+  userDenied: boolean = false
 
-  recorder: null | MediaRecorder
+  recorder: null | MediaRecorder = null
 
-  outputStream: null | MediaStream
+  outputStream: null | MediaStream = null
 
-  recordingChunks: Blob[] | null
+  recordingChunks: Blob[] | null = null
 
   constructor(uppy: Uppy<M, B>, opts?: ScreenCaptureOptions) {
     super(uppy, { ...defaultOptions, ...opts })

packages/@uppy/screen-capture/src/StopWatch.tsx

@@ -48,9 +48,9 @@ class StopWatch extends Component {
     fontFamily: 'Courier New',
   } as const
 
-  private timerRunning: boolean
+  private timerRunning: boolean = false
 
-  private timer: ReturnType<typeof setTimeout>
+  private timer?: ReturnType<typeof setTimeout>
 
   constructor(props: $TSFixMe) {
     super(props)

packages/@uppy/transloadit/src/Assembly.ts

@@ -37,7 +37,7 @@ class TransloaditAssembly extends Emitter {
 
   #previousFetchStatusStillPending = false
 
-  #sse: EventSource | null
+  #sse: EventSource | null = null
 
   status: AssemblyResponse
 

packages/@uppy/transloadit/src/AssemblyWatcher.ts

@@ -21,9 +21,9 @@ class TransloaditAssemblyWatcher<
 
   promise: Promise<void>
 
-  #resolve: () => void
+  #resolve!: () => void
 
-  #reject: (reason?: string) => void
+  #reject!: (reason?: string) => void
 
   #uppy
 

packages/@uppy/transloadit/src/index.ts

@@ -257,7 +257,7 @@ export default class Transloadit<
 
   completedFiles: Record<string, boolean>
 
-  restored: Promise<void> | null
+  restored: Promise<void> | null = null
 
   constructor(uppy: Uppy<M, B>, opts: TransloaditOptions<M, B>) {
     super(uppy, { ...defaultOptions, ...opts })

packages/@uppy/unsplash/src/Unsplash.tsx

@@ -29,7 +29,7 @@ export default class Unsplash<M extends Meta, B extends Body> extends UIPlugin<
 
   provider: SearchProvider<M, B>
 
-  view: SearchProviderViews<M, B>
+  view!: SearchProviderViews<M, B>
 
   storage: typeof tokenStorage
 

packages/@uppy/url/src/Url.tsx

@@ -87,7 +87,7 @@ export default class Url<M extends Meta, B extends Body> extends UIPlugin<
 
   client: RequestClient<M, B>
 
-  canHandleRootDrop: typeof canHandleRootDrop
+  canHandleRootDrop!: typeof canHandleRootDrop
 
   constructor(uppy: Uppy<M, B>, opts: UrlOptions) {
     super(uppy, opts)

packages/@uppy/url/src/UrlUI.tsx

@@ -10,7 +10,8 @@ type UrlUIProps = {
 class UrlUI extends Component<UrlUIProps> {
   form = document.createElement('form')
 
-  input: HTMLInputElement
+  // Ref is always defined after render
+  input!: HTMLInputElement
 
   constructor(props: UrlUIProps) {
     super(props)

packages/@uppy/utils/src/RateLimitedQueue.ts

@@ -46,13 +46,13 @@ export class RateLimitedQueue {
 
   #paused = false
 
-  #pauseTimer: ReturnType<typeof setTimeout>
+  #pauseTimer?: ReturnType<typeof setTimeout>
 
   #downLimit = 1
 
-  #upperLimit: number
+  #upperLimit?: number
 
-  #rateLimitingTimer: ReturnType<typeof setTimeout>
+  #rateLimitingTimer?: ReturnType<typeof setTimeout>
 
   limit: number
 
@@ -285,11 +285,11 @@ export class RateLimitedQueue {
       return
     }
     this.#downLimit = this.limit
-    this.limit = Math.ceil((this.#upperLimit + this.#downLimit) / 2)
+    this.limit = Math.ceil((this.#upperLimit! + this.#downLimit) / 2)
     for (let i = this.#downLimit; i <= this.limit; i++) {
       this.#queueNext()
     }
-    if (this.#upperLimit - this.#downLimit > 3) {
+    if (this.#upperLimit! - this.#downLimit > 3) {
       this.#rateLimitingTimer = setTimeout(this.#increaseLimit, 2000)
     } else {
       this.#downLimit = Math.floor(this.#downLimit / 2)

packages/@uppy/webcam/src/CameraScreen.tsx

@@ -37,7 +37,7 @@ interface CameraScreenProps extends VideoSourceSelectProps {
 }
 
 class CameraScreen extends Component<CameraScreenProps> {
-  private videoElement: HTMLVideoElement
+  private videoElement?: HTMLVideoElement
 
   refs: any
 

packages/@uppy/webcam/src/Webcam.tsx

@@ -126,15 +126,15 @@ export default class Webcam<M extends Meta, B extends Body> extends UIPlugin<
 
   private webcamActive
 
-  private stream: MediaStream | null
+  private stream: MediaStream | null = null
 
-  private recorder: MediaRecorder | null
+  private recorder: MediaRecorder | null = null
 
-  private recordingChunks: Blob[] | null
+  private recordingChunks: Blob[] | null = null
 
-  private recordingLengthTimer: ReturnType<typeof setInterval>
+  private recordingLengthTimer?: ReturnType<typeof setInterval>
 
-  private captureInProgress: boolean
+  private captureInProgress: boolean = false
 
   constructor(uppy: Uppy<M, B>, opts?: WebcamOptions<M, B>) {
     super(uppy, { ...defaultOptions, ...opts })

packages/@uppy/zoom/src/Zoom.tsx

@@ -29,7 +29,7 @@ export default class Zoom<M extends Meta, B extends Body> extends UIPlugin<
 
   provider: Provider<M, B>
 
-  view: ProviderViews<M, B>
+  view!: ProviderViews<M, B>
 
   storage: typeof tokenStorage
 

tsconfig.shared.json

@@ -3,10 +3,10 @@
     "composite": true,
     "incremental": true,
     "target": "ESnext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "module": "preserve",
     "lib": ["dom", "ESnext"],
     "resolveJsonModule": true,
+    "useUnknownInCatchVariables": false,
     "allowImportingTsExtensions": true,
     "allowJs": false,
     "declaration": true,
@@ -16,11 +16,8 @@
     "jsxImportSource": "preact",
     "noImplicitAny": true,
     "noImplicitThis": true,
-    "strictNullChecks": true,
+    "strict": true,
     "verbatimModuleSyntax": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strictFunctionTypes": true,
     "forceConsistentCasingInFileNames": true
   }
 }