fix(replaceType): handle array syntax (#455)

Co-authored-by: Sebastian "Sebbie" Silbermann <silbermann.sebastian@gmail.com>

Author: henryqdineen

.changeset/wise-icons-wash.md

@@ -0,0 +1,7 @@
+---
+"types-react-codemod": patch
+---
+
+Fix a bug when replacing types in shorthand array type notations.
+
+For example, replacing `ReactText` in `ReactText[]` should now result in `(number | string)[]` instead of `number | string[]`.

transforms/__tests__/deprecated-react-child.js

@@ -121,3 +121,35 @@ test("as type parameter", () => {
 		createAction<React.ReactElement | number | string>()"
 	`);
 });
+
+test("array type syntax", () => {
+	expect(
+		applyTransform(`
+			import { ReactChild } from 'react';
+			interface Props {
+				children?: ReactChild[];
+			}
+		`),
+	).toMatchInlineSnapshot(`
+		"import { ReactElement } from 'react';
+		interface Props {
+			children?: (ReactElement | number | string)[];
+		}"
+	`);
+});
+
+test("Array generic", () => {
+	expect(
+		applyTransform(`
+			import { ReactChild } from 'react';
+			interface Props {
+				children?: Array<ReactChild>;
+			}
+		`),
+	).toMatchInlineSnapshot(`
+		"import { ReactElement } from 'react';
+		interface Props {
+			children?: Array<ReactElement | number | string>;
+		}"
+	`);
+});

transforms/utils/replaceType.js

@@ -114,8 +114,16 @@ function replaceReactType(
 		},
 	);
 	for (const typeReferences of sourceIdentifierTypeReferences) {
-		const changedIdentifiers = typeReferences.replaceWith((path) => {
-			return buildTargetTypeReference(path.value);
+		const changedIdentifiers = typeReferences.forEach((path) => {
+			const targetNode = buildTargetTypeReference(path.value);
+			if (
+				targetNode.type === "TSUnionType" &&
+				path.parentPath.value.type === "TSArrayType"
+			) {
+				path.replace(j.tsParenthesizedType(targetNode));
+			} else {
+				path.replace(targetNode);
+			}
 		});
 		if (changedIdentifiers.length > 0) {
 			hasChanges = true;