Convert Product summary to TypeScript (#4099)

* Add WordCountType type

* Convert Summary to TypeScript

* Convert ProductSummary to TypeScript

Author: opr

…s/cart-checkout/product-summary/index.js …/cart-checkout/product-summary/index.tsxassets/js/base/components/cart-checkout/product-summary/index.js renamed to assets/js/base/components/cart-checkout/product-summary/index.tsx assets/js/base/components/cart-checkout/product-summary/index.js renamed to assets/js/base/components/cart-checkout/product-summary/index.tsx

@@ -5,6 +5,11 @@ import PropTypes from 'prop-types';
 import Summary from '@woocommerce/base-components/summary';
 import { blocksConfig } from '@woocommerce/block-settings';
 
+interface ProductSummaryProps {
+	className?: string;
+	shortDescription?: string;
+	fullDescription?: string;
+}
 /**
  * Returns an element containing a summary of the product.
  *
@@ -17,7 +22,7 @@ const ProductSummary = ( {
 	className,
 	shortDescription = '',
 	fullDescription = '',
-} ) => {
+}: ProductSummaryProps ): JSX.Element | null => {
 	const source = shortDescription ? shortDescription : fullDescription;
 
 	if ( ! source ) {
@@ -34,10 +39,4 @@ const ProductSummary = ( {
 	);
 };
 
-ProductSummary.propTypes = {
-	className: PropTypes.string,
-	shortDescription: PropTypes.string,
-	fullDescription: PropTypes.string,
-};
-
 export default ProductSummary;

…sets/js/base/components/summary/index.js …ets/js/base/components/summary/index.tsxassets/js/base/components/summary/index.js renamed to assets/js/base/components/summary/index.tsx assets/js/base/components/summary/index.js renamed to assets/js/base/components/summary/index.tsx

@@ -2,12 +2,19 @@
  * External dependencies
  */
 import { RawHTML, useMemo } from '@wordpress/element';
+import { WordCountType } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
  */
 import { generateSummary } from './utils';
 
+interface SummaryProps {
+	className?: string;
+	source: string;
+	maxLength?: number;
+	countType?: WordCountType;
+}
 /**
  * Summary component.
  *
@@ -22,7 +29,7 @@ export const Summary = ( {
 	maxLength = 15,
 	countType = 'words',
 	className = '',
-} ) => {
+}: SummaryProps ): JSX.Element => {
 	const summaryText = useMemo( () => {
 		return generateSummary( source, maxLength, countType );
 	}, [ source, maxLength, countType ] );

assets/js/settings/blocks/constants.ts

@@ -3,12 +3,17 @@
  */
 import { getSetting, STORE_PAGES } from '@woocommerce/settings';
 
+export type WordCountType =
+	| 'words'
+	| 'characters_excluding_spaces'
+	| 'characters_including_spaces';
+
 interface WcBlocksConfig {
 	buildPhase: number;
 	pluginUrl: string;
 	productCount: number;
 	restApiRoutes: Record< string, string[] >;
-	wordCountType: string;
+	wordCountType: WordCountType;
 }
 
 export const blocksConfig = getSetting( 'wcBlocksConfig', {