Start fixing some more TS errors

client/my-sites/checkout/composite-checkout/payment-methods/credit-card/contact-fields.tsx

@@ -4,6 +4,7 @@ import TaxFields from 'calypso/my-sites/checkout/composite-checkout/components/t
 import useCountryList from 'calypso/my-sites/checkout/composite-checkout/hooks/use-country-list';
 import { CountrySpecificPaymentFields } from '../../components/country-specific-payment-fields';
 import { CardFieldState } from './types';
+import type { WpcomCreditCardSelectors } from './store';
 import type { ManagedContactDetails } from '@automattic/wpcom-checkout';
 
 export default function ContactFields( {
@@ -22,8 +23,9 @@ export default function ContactFields( {
 	const { formStatus } = useFormStatus();
 	const isDisabled = formStatus !== FormStatus.READY;
 	const countriesList = useCountryList();
-	const fields: CardFieldState = useSelect( ( select ) =>
-		select( 'wpcom-credit-card' ).getFields()
+	const fields: CardFieldState = useSelect(
+		( select ) => ( select( 'wpcom-credit-card' ) as WpcomCreditCardSelectors ).getFields(),
+		[]
 	);
 	const onChangeContactInfo = ( newInfo: ManagedContactDetails ) => {
 		setFieldValue( 'countryCode', newInfo.countryCode?.value ?? '' );

client/my-sites/checkout/composite-checkout/payment-methods/credit-card/credit-card-cvv-field.tsx

@@ -15,6 +15,7 @@ import {
 	StripeFieldWrapper,
 	StripeErrorMessage,
 } from './form-layout-components';
+import type { WpcomCreditCardSelectors } from './store';
 import type { StripeFieldChangeInput } from './types';
 import type { StripeElementStyle } from '@stripe/stripe-js';
 
@@ -36,8 +37,9 @@ export default function CreditCardCvvField( {
 	const translate = useTranslate();
 	const { formStatus } = useFormStatus();
 	const isDisabled = formStatus !== FormStatus.READY;
-	const { cardCvc: cardCvcError } = useSelect( ( select ) =>
-		select( 'wpcom-credit-card' ).getCardDataErrors()
+	const { cardCvc: cardCvcError } = useSelect(
+		( select ) => ( select( 'wpcom-credit-card' ) as WpcomCreditCardSelectors ).getCardDataErrors(),
+		[]
 	);
 	const errorMessages = getErrorMessagesForField( 'cvv' );
 	const errorMessage = errorMessages?.length > 0 ? errorMessages[ 0 ] : null;

client/my-sites/checkout/composite-checkout/payment-methods/credit-card/credit-card-expiry-field.tsx

@@ -4,6 +4,7 @@ import { useSelect } from '@wordpress/data';
 import { useTranslate } from 'i18n-calypso';
 import { Input } from 'calypso/my-sites/domains/components/form';
 import { Label, LabelText, StripeFieldWrapper, StripeErrorMessage } from './form-layout-components';
+import type { WpcomCreditCardSelectors } from './store';
 import type { StripeFieldChangeInput } from './types';
 import type { StripeElementStyle } from '@stripe/stripe-js';
 
@@ -25,8 +26,9 @@ export default function CreditCardExpiryField( {
 	const translate = useTranslate();
 	const { formStatus } = useFormStatus();
 	const isDisabled = formStatus !== FormStatus.READY;
-	const { cardExpiry: cardExpiryError } = useSelect( ( select ) =>
-		select( 'wpcom-credit-card' ).getCardDataErrors()
+	const { cardExpiry: cardExpiryError } = useSelect(
+		( select ) => ( select( 'wpcom-credit-card' ) as WpcomCreditCardSelectors ).getCardDataErrors(),
+		[]
 	);
 	const errorMessages = getErrorMessagesForField( 'expiration-date' );
 	const errorMessage = errorMessages?.length > 0 ? errorMessages[ 0 ] : null;

client/my-sites/checkout/composite-checkout/payment-methods/credit-card/credit-card-fields.tsx

@@ -18,6 +18,7 @@ import CreditCardExpiryField from './credit-card-expiry-field';
 import CreditCardLoading from './credit-card-loading';
 import CreditCardNumberField from './credit-card-number-field';
 import { FieldRow, CreditCardFieldsWrapper, CreditCardField } from './form-layout-components';
+import type { WpcomCreditCardSelectors } from './store';
 import type { CardFieldState, StripeFieldChangeInput } from './types';
 
 const StripeFields = styled.div`
@@ -47,11 +48,14 @@ export default function CreditCardFields( {
 	const { __ } = useI18n();
 	const theme = useTheme();
 	const [ isStripeFullyLoaded, setIsStripeFullyLoaded ] = useState( false );
-	const fields: CardFieldState = useSelect( ( select ) =>
-		select( 'wpcom-credit-card' ).getFields()
+	const fields: CardFieldState = useSelect(
+		( select ) => ( select( 'wpcom-credit-card' ) as WpcomCreditCardSelectors ).getFields(),
+		[]
 	);
-	const useForAllSubscriptions: boolean = useSelect( ( select ) =>
-		select( 'wpcom-credit-card' ).useForAllSubscriptions()
+	const useForAllSubscriptions: boolean = useSelect(
+		( select ) =>
+			( select( 'wpcom-credit-card' ) as WpcomCreditCardSelectors ).useForAllSubscriptions(),
+		[]
 	);
 	const getField = ( key: string ) => fields[ key ] || {};
 	const getFieldValue = ( key: string ) => getField( key ).value ?? '';

client/my-sites/checkout/composite-checkout/payment-methods/credit-card/credit-card-number-field.tsx

@@ -4,6 +4,7 @@ import { useSelect } from '@wordpress/data';
 import { useI18n } from '@wordpress/react-i18n';
 import CreditCardNumberInput from 'calypso/components/upgrades/credit-card-number-input';
 import { Label, LabelText, StripeFieldWrapper, StripeErrorMessage } from './form-layout-components';
+import type { WpcomCreditCardSelectors } from './store';
 import type { StripeFieldChangeInput } from './types';
 import type { StripeElementStyle } from '@stripe/stripe-js';
 
@@ -27,9 +28,13 @@ export default function CreditCardNumberField( {
 	const { __ } = useI18n();
 	const { formStatus } = useFormStatus();
 	const isDisabled = formStatus !== FormStatus.READY;
-	const brand: string = useSelect( ( select ) => select( 'wpcom-credit-card' ).getBrand() );
-	const { cardNumber: cardNumberError } = useSelect( ( select ) =>
-		select( 'wpcom-credit-card' ).getCardDataErrors()
+	const brand: string = useSelect(
+		( select ) => ( select( 'wpcom-credit-card' ) as WpcomCreditCardSelectors ).getBrand(),
+		[]
+	);
+	const { cardNumber: cardNumberError } = useSelect(
+		( select ) => ( select( 'wpcom-credit-card' ) as WpcomCreditCardSelectors ).getCardDataErrors(),
+		[]
 	);
 	const errorMessages = getErrorMessagesForField( 'number' );
 	const errorMessage = errorMessages?.length > 0 ? errorMessages[ 0 ] : null;

client/my-sites/checkout/composite-checkout/payment-methods/credit-card/credit-card-pay-button.tsx

@@ -7,6 +7,7 @@ import { useI18n } from '@wordpress/react-i18n';
 import debugFactory from 'debug';
 import { validatePaymentDetails } from 'calypso/lib/checkout/validation';
 import { actions, selectors } from './store';
+import type { WpcomCreditCardSelectors } from './store';
 import type { CardFieldState, CardStoreType } from './types';
 import type { ProcessPayment, LineItem } from '@automattic/composite-checkout';
 
@@ -28,11 +29,14 @@ export default function CreditCardPayButton( {
 	const { __ } = useI18n();
 	const total = useTotal();
 	const { stripeConfiguration, stripe } = useStripe();
-	const fields: CardFieldState = useSelect( ( select ) =>
-		select( 'wpcom-credit-card' ).getFields()
+	const fields: CardFieldState = useSelect(
+		( select ) => ( select( 'wpcom-credit-card' ) as WpcomCreditCardSelectors ).getFields(),
+		[]
 	);
-	const useForAllSubscriptions = useSelect( ( select ) =>
-		select( 'wpcom-credit-card' ).useForAllSubscriptions()
+	const useForAllSubscriptions = useSelect(
+		( select ) =>
+			( select( 'wpcom-credit-card' ) as WpcomCreditCardSelectors ).useForAllSubscriptions(),
+		[]
 	);
 	const cardholderName = fields.cardholderName;
 	const { formStatus } = useFormStatus();

client/my-sites/checkout/composite-checkout/payment-methods/credit-card/index.tsx

@@ -14,6 +14,7 @@ import {
 } from 'calypso/my-sites/checkout/composite-checkout/components/summary-details';
 import CreditCardFields from './credit-card-fields';
 import CreditCardPayButton from './credit-card-pay-button';
+import type { WpcomCreditCardSelectors } from './store';
 import type { CardFieldState, CardStoreType } from './types';
 
 export { createCreditCardPaymentMethodStore } from './store';
@@ -55,11 +56,15 @@ export function createCreditCardMethod( {
 }
 
 function CreditCardSummary() {
-	const fields: CardFieldState = useSelect( ( select ) =>
-		select( 'wpcom-credit-card' ).getFields()
+	const fields: CardFieldState = useSelect(
+		( select ) => ( select( 'wpcom-credit-card' ) as WpcomCreditCardSelectors ).getFields(),
+		[]
 	);
 	const cardholderName = fields.cardholderName;
-	const brand: string = useSelect( ( select ) => select( 'wpcom-credit-card' ).getBrand() );
+	const brand: string = useSelect(
+		( select ) => ( select( 'wpcom-credit-card' ) as WpcomCreditCardSelectors ).getBrand(),
+		[]
+	);
 
 	return (
 		<SummaryDetails>

client/my-sites/checkout/composite-checkout/payment-methods/credit-card/store.ts

@@ -8,7 +8,9 @@ import type {
 	CardStoreAction,
 	CardElementType,
 } from './types';
+import type { SelectFromMap } from '@automattic/data-stores';
 import type { StoreStateValue } from '@automattic/wpcom-checkout';
+import type { AnyAction } from 'redux';
 
 const debug = debugFactory( 'calypso:composite-checkout:credit-card' );
 
@@ -56,6 +58,8 @@ export const selectors = {
 	},
 };
 
+export type WpcomCreditCardSelectors = SelectFromMap< typeof selectors >;
+
 export function createCreditCardPaymentMethodStore( {
 	initialUseForAllSubscriptions,
 	allowUseForAllSubscriptions,
@@ -168,7 +172,7 @@ export function createCreditCardPaymentMethodStore( {
 				brand: brandReducer(),
 				useForAllSubscriptions: getInitialUseForAllSubscriptionsValue(),
 			},
-			action
+			action: AnyAction
 		) {
 			return {
 				fields: fieldReducer( state.fields, action ),