Convert product-elements/tag-list to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/7538)

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/attributes.ts

@@ -1,4 +1,4 @@
-export const blockAttributes = {
+export const blockAttributes: Record< string, Record< string, unknown > > = {
 	productId: {
 		type: 'number',
 		default: 0,

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/block.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import {
 	useInnerBlockLayoutContext,
@@ -11,20 +10,17 @@ import {
 import { useColorProps, useTypographyProps } from '@woocommerce/base-hooks';
 import { isEmpty } from 'lodash';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
+import type { HTMLAttributes } from 'react';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
+import type { BlocksAttributes } from './types';
 
-/**
- * Product Tag List Block Component.
- *
- * @param {Object} props             Incoming props.
- * @param {string} [props.className] CSS Class name for the component.
- * @return {*} The component.
- */
-const Block = ( props ) => {
+type Props = BlocksAttributes & HTMLAttributes< HTMLDivElement >;
+
+const Block = ( props: Props ): JSX.Element | null => {
 	const { className } = props;
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
@@ -64,8 +60,4 @@ const Block = ( props ) => {
 	);
 };
 
-Block.propTypes = {
-	className: PropTypes.string,
-};
-
 export default withProductDataContext( Block );

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/constants.tsx

@@ -4,14 +4,14 @@
 import { __ } from '@wordpress/i18n';
 import { tag, Icon } from '@wordpress/icons';
 
-export const BLOCK_TITLE = __(
+export const BLOCK_TITLE: string = __(
 	'Product Tag List',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON = (
+export const BLOCK_ICON: JSX.Element = (
 	<Icon icon={ tag } className="wc-block-editor-components-block-icon" />
 );
-export const BLOCK_DESCRIPTION = __(
+export const BLOCK_DESCRIPTION: string = __(
 	'Display the list of tags that are assigned to a product.',
 	'woo-gutenberg-products-block'
 );

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/edit.tsx

@@ -12,8 +12,13 @@ import { useBlockProps } from '@wordpress/block-editor';
 import Block from './block';
 import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+import type { BlocksAttributes } from './types';
 
-const Edit = ( { attributes } ) => {
+interface Props {
+	attributes: BlocksAttributes;
+}
+
+const Edit = ( { attributes }: Props ): JSX.Element => {
 	const blockProps = useBlockProps();
 	return (
 		<div { ...blockProps }>

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/index.ts

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+import type { BlockConfiguration } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -17,7 +18,8 @@ import {
 import { Save } from './save';
 import { supports } from './supports';
 
-const blockConfig = {
+const blockConfig: BlockConfiguration = {
+	...sharedConfig,
 	apiVersion: 2,
 	title,
 	description,

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/types.ts

@@ -0,0 +1,3 @@
+export interface BlocksAttributes {
+	productId: number;
+}