diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/attributes.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/attributes.ts
similarity index 52%
rename from plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/attributes.js
rename to plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/attributes.ts
index 5bac8820c40..caed2652df1 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/attributes.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/attributes.ts
@@ -1,4 +1,4 @@
-export const blockAttributes = {
+export const blockAttributes: Record< string, Record< string, unknown > > = {
 	productId: {
 		type: 'number',
 		default: 0,
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/block.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/block.tsx
similarity index 86%
rename from plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/block.js
rename to plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/block.tsx
index 0f8ef195d36..59a4dd628fe 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/block.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/block.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import {
 	useInnerBlockLayoutContext,
@@ -10,11 +9,15 @@ import {
 } from '@woocommerce/shared-context';
 import { isEmpty } from 'lodash';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
+import { HTMLAttributes } from 'react';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
+import { Attributes } from './types';
+
+type Props = Attributes & HTMLAttributes< HTMLDivElement >;
 
 /**
  * Product Category Block Component.
@@ -23,7 +26,7 @@ import './style.scss';
  * @param {string} [props.className] CSS Class name for the component.
  * @return {*} The component.
  */
-const Block = ( { className } ) => {
+const Block = ( { className }: Props ): JSX.Element | null => {
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 
@@ -57,8 +60,4 @@ const Block = ( { className } ) => {
 	);
 };
 
-Block.propTypes = {
-	className: PropTypes.string,
-};
-
 export default withProductDataContext( Block );
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/constants.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/constants.tsx
similarity index 64%
rename from plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/constants.js
rename to plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/constants.tsx
index 18b53f405a2..42f707dfa6c 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/constants.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/constants.tsx
@@ -4,12 +4,12 @@
 import { __ } from '@wordpress/i18n';
 import { folder, Icon } from '@woocommerce/icons';
 
-export const BLOCK_TITLE = __(
+export const BLOCK_TITLE: string = __(
 	'Product Category List',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON = <Icon srcElement={ folder } />;
-export const BLOCK_DESCRIPTION = __(
+export const BLOCK_ICON: JSX.Element = <Icon srcElement={ folder } />;
+export const BLOCK_DESCRIPTION: string = __(
 	'Display a list of categories belonging to a product.',
 	'woo-gutenberg-products-block'
 );
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/edit.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/edit.tsx
similarity index 83%
rename from plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/edit.js
rename to plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/edit.tsx
index b5df02f8baa..d3f8266c562 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/edit.tsx
@@ -11,8 +11,13 @@ import EditProductLink from '@woocommerce/editor-components/edit-product-link';
 import Block from './block';
 import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+import { Attributes } from './types';
 
-const Edit = ( { attributes } ) => {
+interface Props {
+	attributes: Attributes;
+}
+
+const Edit = ( { attributes }: Props ): JSX.Element => {
 	return (
 		<>
 			<EditProductLink />
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/index.ts
similarity index 65%
rename from plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/index.js
rename to plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/index.ts
index 34c818ff92d..51e802611ff 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/index.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/index.ts
@@ -2,11 +2,12 @@
  * External dependencies
  */
 import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+import { BlockConfiguration } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import sharedConfig from '../shared/config';
+import sharedConfig from './../shared/config';
 import attributes from './attributes';
 import edit from './edit';
 import {
@@ -15,7 +16,8 @@ import {
 	BLOCK_DESCRIPTION as description,
 } from './constants';
 
-const blockConfig = {
+const blockConfig: BlockConfiguration = {
+	...sharedConfig,
 	title,
 	description,
 	icon: {
@@ -26,7 +28,7 @@ const blockConfig = {
 	edit,
 };
 
-registerExperimentalBlockType( 'woocommerce/product-category-list', {
-	...sharedConfig,
-	...blockConfig,
-} );
+registerExperimentalBlockType(
+	'woocommerce/product-category-list',
+	blockConfig
+);
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/types.ts b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/types.ts
new file mode 100644
index 00000000000..104d6e55f30
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/types.ts
@@ -0,0 +1,3 @@
+export interface Attributes {
+	productId: number;
+}
diff --git a/plugins/woocommerce-blocks/tsconfig.base.json b/plugins/woocommerce-blocks/tsconfig.base.json
index 6f3da4568c5..04c373a04eb 100644
--- a/plugins/woocommerce-blocks/tsconfig.base.json
+++ b/plugins/woocommerce-blocks/tsconfig.base.json
@@ -52,6 +52,7 @@
 			"@woocommerce/knobs": [ "storybook/knobs" ],
 			"@woocommerce/settings": [ "assets/js/settings/shared" ],
 			"@woocommerce/shared-context": [ "assets/js/shared/context" ],
+		  	"@woocommerce/shared-hocs": [ "assets/js/shared/hocs" ],
 			"@woocommerce/type-defs/*": [ "assets/js/types/type-defs/*" ],
 			"@woocommerce/types": [ "assets/js/types" ]
 		}