← 글 목록으로

FFmpeg.wasm readFile Results Trigger TS2345 When Passed to Blob

typescriptffmpeg

I tried to wrap an FFmpeg.wasm (@ffmpeg/ffmpeg) conversion result in a Blob for download, and TypeScript complained.

const data = await ffmpeg.readFile("output.mp4"); // FileData = Uint8Array | string
const blob = new Blob([data], { type: "video/mp4" });
// TS2345: Argument of type 'FileData' is not assignable to parameter of type 'BlobPart'

Cause

Since TypeScript 5.7, Uint8Array is generic: Uint8Array<TArrayBuffer>. FFmpeg.wasm's readFile returns Uint8Array<ArrayBufferLike>, which admits the possibility that the backing store is a SharedArrayBuffer. BlobPart, however, only accepts views backed by a plain ArrayBuffer — so the types don't match.

Fix

Copying with new Uint8Array() produces a fresh Uint8Array<ArrayBuffer> backed by a new ArrayBuffer.

const data = await ffmpeg.readFile("output.mp4");
const bytes = new Uint8Array(data as Uint8Array);
const blob = new Blob([bytes], { type: "video/mp4" });

A type assertion like as unknown as BlobPart also compiles, but considering what happens if a SharedArrayBuffer actually shows up, the copy is the honest fix. The cost of copying one video's worth of bytes is imperceptible for a single download action.

Summary

  • In TS 5.7+, Uint8Array<ArrayBufferLike> cannot be passed directly to BlobPart
  • Copying with new Uint8Array(data) yields Uint8Array<ArrayBuffer> and resolves it
  • Copying is safer than silencing the compiler with an assertion