How to use the @wordpress/blocks.getBlockAttributes function in @wordpress/blocks

// $ExpectType BlockInstance<{ [k: string]: any; }>[] | null
blocks.switchToBlockType(BLOCK_INSTANCE, 'core/paragraph');

// $ExpectType BlockInstance<{ [k: string]: any; }>[] | null
blocks.switchToBlockType([BLOCK_INSTANCE], 'core/paragraph');

//
// parser
// ----------------------------------------------------------------------------

// $ExpectType Record
blocks.getBlockAttributes('my/foo', '<div>hello world</div>');

// $ExpectType { foo: string; }
blocks.getBlockAttributes(BLOCK, '<div>hello world</div>');

const TEST_HTML = `
    <main id="root">
        <p data-baz="false" data-foo="bar">
            Hello World!
        </p>
        <button class="my-button" disabled="">Click me</button>
        <p>
            Lorem ipsum
        </p>
    </main>
`;

// $ExpectType boolean | undefined
blocks.parseWithAttributeSchema(TEST_HTML, {
    source: 'attribute',

transform: node => {
          // Search both figure and image classes. Alignment could be
          // set on either. ID is set on the image.
          const className = node.className + ' ' + node.querySelector('img').className;
          const alignMatches = /(?:^|\s)align(left|center|right)(?:$|\s)/.exec(className);
          const align = alignMatches ? alignMatches[ 1 ] : undefined;
          const idMatches = /(?:^|\s)wp-image-(\d+)(?:$|\s)/.exec(className);
          const id = idMatches ? Number(idMatches[ 1 ]) : undefined;
          const anchorElement = node.querySelector('a');
          const linkDestination = anchorElement && anchorElement.href ? 'custom' : undefined;
          const href = anchorElement && anchorElement.href ? anchorElement.href : undefined;
          const attributes = getBlockAttributes('core/image', node.outerHTML, { align, id, linkDestination, href });
          return createBlock('core/image', attributes);
        },
      },

transform: ( node ) => {
					// Search both figure and image classes. Alignment could be
					// set on either. ID is set on the image.
					const className = node.className + ' ' + node.querySelector( 'img' ).className;
					const alignMatches = /(?:^|\s)align(left|center|right)(?:$|\s)/.exec( className );
					const align = alignMatches ? alignMatches[ 1 ] : undefined;
					const idMatches = /(?:^|\s)wp-image-(\d+)(?:$|\s)/.exec( className );
					const id = idMatches ? idMatches[ 1 ] : undefined;
					const anchorElement = node.querySelector( 'a' );
					const linkDestination = anchorElement && anchorElement.href ? 'custom' : undefined;
					const href = anchorElement && anchorElement.href ? anchorElement.href : undefined;
					const blockType = getBlockType( 'core/image' );
					const attributes = getBlockAttributes( blockType, node.outerHTML, { align, id, linkDestination, href } );
					return createBlock( 'core/image', attributes );
				},
			},

transform: ( node ) => {
				// Search both figure and image classes. Alignment could be
				// set on either. ID is set on the image.
				const className = node.className + ' ' + node.querySelector( 'img' ).className;
				const alignMatches = /(?:^|\s)align(left|center|right)(?:$|\s)/.exec( className );
				const align = alignMatches ? alignMatches[ 1 ] : undefined;
				const idMatches = /(?:^|\s)wp-image-(\d+)(?:$|\s)/.exec( className );
				const id = idMatches ? Number( idMatches[ 1 ] ) : undefined;
				const anchorElement = node.querySelector( 'a' );
				const linkDestination = anchorElement && anchorElement.href ? 'custom' : undefined;
				const href = anchorElement && anchorElement.href ? anchorElement.href : undefined;
				const rel = anchorElement && anchorElement.rel ? anchorElement.rel : undefined;
				const linkClass = anchorElement && anchorElement.className ? anchorElement.className : undefined;
				const attributes = getBlockAttributes( 'core/image', node.outerHTML, { align, id, linkDestination, href, rel, linkClass } );
				return createBlock( 'core/image', attributes );
			},
		},

onBlur() {
		const { html } = this.state;
		const blockType = getBlockType( this.props.block.name );
		const attributes = getBlockAttributes( blockType, html, this.props.block.attributes );

		// If html is empty  we reset the block to the default HTML and mark it as valid to avoid triggering an error
		const content = html ? html : getSaveContent( blockType, attributes );
		const isValid = html ? isValidBlockContent( blockType, attributes, content ) : true;

		this.props.onChange( this.props.clientId, attributes, content, isValid );

		// Ensure the state is updated if we reset so it displays the default content
		if ( ! html ) {
			this.setState( { html: content } );
		}

		if ( ! isValid ) {
			// An error was detected so flip the block back to visual mode so we see the invalid block warning
			this.props.onToggleMode( this.props.clientId );
		}

onBlur() {
		const blockType = getBlockType( this.props.block.name );
		const attributes = getBlockAttributes( blockType, this.state.html, this.props.block.attributes );
		const isValid = isValidBlock( this.state.html, blockType, attributes );
		this.props.onChange( this.props.uid, attributes, this.state.html, isValid );
	}

transform( node ) {
				return createBlock( metadata.name, {
					...getBlockAttributes( metadata.name, node.outerHTML ),
				} );
			},
		},

transform: ( node ) => {
			const innerHTML = node.outerHTML;
			const blockAttributes = getBlockAttributes( name, innerHTML );

			if ( 'amp/amp-story-text' === name ) {
				/*
				 * When there is nothing that matches the content selector (.amp-text-content),
				 * the pasted content lacks the amp-fit-text wrapper and thus ampFitText is false.
				 */
				if ( ! blockAttributes.content ) {
					blockAttributes.content = node.textContent;
					blockAttributes.tagName = node.nodeName;
					blockAttributes.ampFitText = false;
				}
			}

			return createBlock( name, blockAttributes );
		},
	};

transform: ( node ) => {
					const innerHTML = node.outerHTML;
					const blockAttributes = getBlockAttributes( name, innerHTML );

					return createBlock( name, blockAttributes );
				},
			},

transform( node ) {
				return createBlock( metadata.name, {
					...getBlockAttributes( metadata.name, node.outerHTML ),
				} );
			},
		},