Convert blob package to TS

packages/blob/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   Refactor to TypeScript ([#62569](https://github.com/WordPress/gutenberg/pull/62569)).
+
 ## 4.0.0 (2024-05-31)
 
 ### Breaking Changes

packages/blob/README.md

@@ -61,7 +61,7 @@ _Parameters_
 
 _Returns_
 
--   `File|undefined`: The file for the blob URL.
+-   `File | undefined`: The file for the blob URL.
 
 ### getBlobTypeByURL
 
@@ -73,15 +73,15 @@ _Parameters_
 
 _Returns_
 
--   `string|undefined`: The blob type.
+-   `string | undefined`: The blob type.
 
 ### isBlobURL
 
 Check whether a url is a blob url.
 
 _Parameters_
 
--   _url_ `string|undefined`: The URL.
+-   _url_ `string | undefined`: The URL.
 
 _Returns_
 

packages/blob/src/index.js → packages/blob/src/index.ts

@@ -1,16 +1,13 @@
-/**
- * @type {Record<string, File|undefined>}
- */
-const cache = {};
+const cache: Record< string, File > = {};
 
 /**
  * Create a blob URL from a file.
  *
- * @param {File} file The file to create a blob URL for.
+ * @param file The file to create a blob URL for.
  *
- * @return {string} The blob URL.
+ * @return The blob URL.
  */
-export function createBlobURL( file ) {
+export function createBlobURL( file: File ): string {
 	const url = window.URL.createObjectURL( file );
 
 	cache[ url ] = file;
@@ -23,11 +20,11 @@ export function createBlobURL( file ) {
  * `createBlobURL` and not removed by `revokeBlobURL`, otherwise it will return
  * `undefined`.
  *
- * @param {string} url The blob URL.
+ * @param url The blob URL.
  *
- * @return {File|undefined} The file for the blob URL.
+ * @return The file for the blob URL.
  */
-export function getBlobByURL( url ) {
+export function getBlobByURL( url: string ): File | undefined {
 	return cache[ url ];
 }
 
@@ -36,20 +33,20 @@ export function getBlobByURL( url ) {
  * `createBlobURL` and not removed by `revokeBlobURL`, otherwise it will return
  * `undefined`.
  *
- * @param {string} url The blob URL.
+ * @param url The blob URL.
  *
- * @return {string|undefined} The blob type.
+ * @return The blob type.
  */
-export function getBlobTypeByURL( url ) {
+export function getBlobTypeByURL( url: string ): string | undefined {
 	return getBlobByURL( url )?.type.split( '/' )[ 0 ]; // 0: media type , 1: file extension eg ( type: 'image/jpeg' ).
 }
 
 /**
  * Remove the resource and file cache from memory.
  *
- * @param {string} url The blob URL.
+ * @param url The blob URL.
  */
-export function revokeBlobURL( url ) {
+export function revokeBlobURL( url: string ): void {
 	if ( cache[ url ] ) {
 		window.URL.revokeObjectURL( url );
 	}
@@ -60,11 +57,11 @@ export function revokeBlobURL( url ) {
 /**
  * Check whether a url is a blob url.
  *
- * @param {string|undefined} url The URL.
+ * @param url The URL.
  *
- * @return {boolean} Is the url a blob url?
+ * @return Is the url a blob url?
  */
-export function isBlobURL( url ) {
+export function isBlobURL( url: string | undefined ): boolean {
 	if ( ! url || ! url.indexOf ) {
 		return false;
 	}
@@ -90,11 +87,15 @@ export function isBlobURL( url ) {
  * 	downloadBlob( filename, fileContent, 'application/json' );
  * ```
  *
- * @param {string}   filename    File name.
- * @param {BlobPart} content     File content (BufferSource | Blob | string).
- * @param {string}   contentType (Optional) File mime type. Default is `''`.
+ * @param filename    File name.
+ * @param content     File content (BufferSource | Blob | string).
+ * @param contentType (Optional) File mime type. Default is `''`.
  */
-export function downloadBlob( filename, content, contentType = '' ) {
+export function downloadBlob(
+	filename: string,
+	content: BlobPart,
+	contentType: string = ''
+): void {
 	if ( ! filename || ! content ) {
 		return;
 	}

packages/blob/src/test/index.js → packages/blob/src/test/index.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { isBlobURL, getBlobTypeByURL, downloadBlob } from '../';
+import { isBlobURL, getBlobTypeByURL, downloadBlob } from '..';
 
 describe( 'isBlobURL', () => {
 	it( 'returns true if the url starts with "blob:"', () => {
@@ -13,17 +13,23 @@ describe( 'isBlobURL', () => {
 	} );
 
 	it( 'returns false if the url is not defined', () => {
-		expect( isBlobURL() ).toBe( false );
+		expect(
+			// @ts-expect-error This is not a valid call according to types.
+			isBlobURL()
+		).toBe( false );
 	} );
 } );
 
 describe( 'getBlobTypeByURL', () => {
 	it( 'returns undefined if the blob is not found', () => {
-		expect( getBlobTypeByURL( 'blob:notexisting' ) ).toBe( undefined );
+		expect( getBlobTypeByURL( 'blob:notexisting' ) ).toBeUndefined();
 	} );
 
 	it( 'returns undefined if the url is not defined', () => {
-		expect( getBlobTypeByURL() ).toBe( undefined );
+		expect(
+			// @ts-expect-error This is not a valid call according to types.
+			getBlobTypeByURL()
+		).toBeUndefined();
 	} );
 } );
 
@@ -36,13 +42,17 @@ describe( 'downloadBlob', () => {
 	const createElementSpy = jest
 		.spyOn( global.document, 'createElement' )
 		.mockReturnValue( mockAnchorElement );
+
 	const mockBlob = jest.fn();
-	const blobSpy = jest.spyOn( window, 'Blob' ).mockReturnValue( mockBlob );
+	const blobSpy = jest
+		.spyOn( window, 'Blob' )
+		.mockReturnValue( mockBlob as unknown as Blob );
 	jest.spyOn( document.body, 'appendChild' );
 	jest.spyOn( document.body, 'removeChild' );
 	beforeEach( () => {
 		// Can't seem to spy on these static methods. They are `undefined`.
 		// Possibly overwritten: https://github.com/WordPress/gutenberg/blob/trunk/packages/jest-preset-default/scripts/setup-globals.js#L5
+		// @ts-expect-error This is not a valid URL object.
 		window.URL = {
 			createObjectURL,
 			revokeObjectURL,