Reactで文章やファイルをgzipに圧縮してダウンロードする方法

// gzip.ts
export async function gzipBlob(
  input: Blob,
  onProgress?: (doneBytes: number) => void,
): Promise<Blob> {
  let done = 0;
  // 圧縮の前に通るバイト数を数えて、進み具合として知らせる
  const counter = new TransformStream<Uint8Array<ArrayBuffer>, Uint8Array<ArrayBuffer>>({
    transform(chunk, controller) {
      done += chunk.byteLength;
      onProgress?.(done);
      controller.enqueue(chunk);
    },
  });
  const stream = input
    .stream()
    .pipeThrough(counter)
    .pipeThrough(new CompressionStream('gzip'));
  const gz = await new Response(stream).blob();
  return new Blob([gz], { type: 'application/gzip' });
}

error TS2345: Argument of type 'CompressionStream' is not assignable to parameter of type 'ReadableWritablePair<Uint8Array<ArrayBuffer>, Uint8Array<ArrayBufferLike>>'.
  Types of property 'writable' are incompatible.
    Type 'WritableStream<BufferSource>' is not assignable to type 'WritableStream<Uint8Array<ArrayBufferLike>>'.

// gzip.ts（続き）
export function saveBlob(blob: Blob, filename: string): void {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

// GzipDownload.tsx
import { useState } from 'react';
import { gzipBlob, saveBlob } from './gzip';

type Status =
  | { kind: 'idle' }
  | { kind: 'working'; done: number; total: number }
  | { kind: 'done'; filename: string; before: number; after: number }
  | { kind: 'error'; message: string };

const kb = (n: number) => `${(n / 1024).toFixed(1)} KB`;

export function GzipDownload() {
  const [text, setText] = useState('');
  const [file, setFile] = useState<File | null>(null);
  const [status, setStatus] = useState<Status>({ kind: 'idle' });

  async function run(source: Blob, filename: string) {
    setStatus({ kind: 'working', done: 0, total: source.size });
    try {
      const gz = await gzipBlob(source, (done) =>
        setStatus({ kind: 'working', done, total: source.size }),
      );
      saveBlob(gz, filename);
      setStatus({ kind: 'done', filename, before: source.size, after: gz.size });
    } catch (e) {
      setStatus({ kind: 'error', message: String(e) });
    }
  }

  const working = status.kind === 'working';

  return (
    <div className="demo">
      <label>
        文章
        <textarea value={text} onChange={(e) => setText(e.target.value)} rows={5} />
      </label>
      <button
        disabled={working || text === ''}
        onClick={() => run(new Blob([text], { type: 'text/plain' }), 'memo.txt.gz')}
      >
        文章を gzip で保存
      </button>

      <label>
        ファイル
        <input type="file" onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
      </label>
      <button
        disabled={working || file === null}
        onClick={() => file && run(file, `${file.name}.gz`)}
      >
        ファイルを gzip で保存
      </button>

      <p role="status">
        {status.kind === 'working' &&
          `圧縮中（${Math.floor((status.done / Math.max(status.total, 1)) * 100)}%）`}
        {status.kind === 'done' &&
          `${status.filename} を保存しました（${kb(status.before)} → ${kb(status.after)}）`}
        {status.kind === 'error' && `失敗しました：${status.message}`}
      </p>
    </div>
  );
}

const text = await new Response(
  gz.stream().pipeThrough(new DecompressionStream('gzip')),
).text();