Typescript 4.4+ prop-type to types not converting

As an FYI, these issue only appears to occur in version 4.4+, I’ve tested and the codemod works on 4.2, so there is a work around.

For context, at this point I’ve already run the … command, which changed the files to be typescript correctly

npx ts-migrate rename . \
    --sources "./ConfirmationModal/index.jsx"

When following up with …

npx ts-migrate migrate . \
    --sources "./ConfirmationModal/index.tsx" \
    --sources "node_modules/**/*.d.ts" \
    --aliases tsfixme

The command would not be able to generate types from a “simple” react component that had prop types. On further testing this was because of the typescript version (4.6), debugging the react-props plugin, I found this interesting behaviour

Here …, we’re trying to find if there is an import declaration for prop-types, funnily the isImportDeclaration doesn’t return true in v4.4+ - I believe this is the cause of the bug.

https://github.com/airbnb/ts-migrate/blob/master/packages/ts-migrate-plugins/src/plugins/react-props.ts#L54

The codemod doesn’t outright error and it adds most types correctly, but without prop-types being changed to types in results in significantly more type errors than required.

Test file ConfirmationModal.tsx

import React from "react";
import pt from "prop-types";

const Modal = () => <div>Fake Modal</div>;
const CONFIRMATION_MODAL_SUCCESS = "CONFIRMATION_MODAL_SUCCESS";
const CONFIRMATION_MODAL_ERROR = "CONFIRMATION_MODAL_ERROR";

const ConfirmationModal = (props) => {
  const {
    loading,
    result,
    title,
    successTitle,
    errorTitle,
    bodyDescription,
    bodyItems,
    bodyOnConfirmDescription,
    successBody,
    errorBody,
    cancelText,
    confirmText,
    onConfirm,
    onCancel,
    secondaryText,
    secondaryAction,
  } = props;

  let modalTitle;
  let modalBody;

  switch (result) {
    case CONFIRMATION_MODAL_SUCCESS:
      modalTitle = successTitle || title;
      modalBody = <div>{successBody}</div>;
      break;
    case CONFIRMATION_MODAL_ERROR:
      modalTitle = errorTitle || title;
      modalBody = <div>{errorBody}</div>;
      break;
    default:
      modalTitle = title;
      modalBody = (
        <div>
          <p>{bodyDescription}</p>
          {bodyItems.map((item, index) => (
            <p key={index}>
              <p inline bold>
                {item.boldText}
              </p>{" "}
              {item.text}
            </p>
          ))}
          <p>{bodyOnConfirmDescription}</p>
        </div>
      );
  }
  return (
    <Modal
      isOpen
      isLoading={loading}
      modalTitle={modalTitle}
      cancelText={cancelText || "Cancel"}
      secondaryText={secondaryText}
      submitText={confirmText || "Confirm"}
      onSubmit={onConfirm}
      onCancel={onCancel}
      onSecondaryAction={secondaryAction}
      isSubmitable={result !== CONFIRMATION_MODAL_ERROR}
      hasSecondaryAction={
        !!secondaryAction && result === CONFIRMATION_MODAL_SUCCESS
      }
    >
      {modalBody}
    </Modal>
  );
};

ConfirmationModal.propTypes = {
  title: pt.string.isRequired,
  successTitle: pt.string,
  errorTitle: pt.string,
  bodyDescription: pt.string,
  bodyItems: pt.arrayOf(
    pt.shape({ boldText: pt.string, text: pt.string.isRequired })
  ),
  bodyOnConfirmDescription: pt.string,
  successBody: pt.string.isRequired,
  errorBody: pt.string.isRequired,
  cancelText: pt.string,
  confirmText: pt.string,
  onCancel: pt.func,
  onConfirm: pt.func,
  secondaryAction: pt.func,
  secondaryText: pt.string,
};

export default ConfirmationModal;

[dlemburg]

Can confirm that latest version of typescript and ts-migrate fixes this issue.

[Rudeg]

could you please try the latest version?