From e414713e4c6d19a4f4aaa0193f540636dd936eb0 Mon Sep 17 00:00:00 2001
From: Vojtech Novak <vonovak@gmail.com>
Date: Tue, 18 Jul 2023 15:35:56 -0700
Subject: [PATCH] chore: stricter TS check for transform style (#38348)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary:
This improves the strictness of TS typings for `transform` on `View`'s `style` prop. Consider the following example, with what TS reports in case of errors, using RN 0.72.3. The ❌ / ✅ symbols indicate whether TS is happy with the code

```tsx
❌ <View style={{ transform: [{ scale: undefined }] }} />              //  TS2769: No overload matches this call.
❌ <View style={{ transform: [{ something: 1 }] }} />                  //  TS2769: No overload matches this call.
✅ <View style={{ transform: [{ scale: 1 }, { rotate: '90deg' }] }} />
✅ <View style={{ transform: [{ scale: 1, translateX: 1 }] }} /> // this is WRONG, corrected in the next row
✅ <View style={{ transform: [{ scale: 1 }, { translateX: 1 }] }} />
```

With this change, TS will report an error even for line 4

```tsx
❌ <View style={{ transform: [{ scale: undefined }] }} />              //  TS2769: No overload matches this call.
❌ <View style={{ transform: [{ something: 1 }] }} />                  //  TS2769: No overload matches this call.
✅ <View style={{ transform: [{ scale: 1 }, { rotate: '90deg' }] }} />
❌ <View style={{ transform: [{ scale: 1, translateX: 1 }] }} />      //  TS2769: No overload matches this call.
✅ <View style={{ transform: [{ scale: 1 }, { translateX: 1 }] }} />
```

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

[GENERAL] [CHANGED] - stricter TS check for transform style

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: https://github.com/facebook/react-native/pull/38348

Test Plan: tested locally with the example given above; also added a TS type test

Reviewed By: rshest

Differential Revision: D47526366

Pulled By: NickGerleman

fbshipit-source-id: 5bd007ce29509ccdfce74c3864dee24290d9a175
---
 .../Libraries/StyleSheet/StyleSheetTypes.d.ts | 34 +++++++++++--------
 .../types/__typetests__/animated.tsx          |  2 ++
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
index 75f625250c9..7956766b343 100644
--- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
+++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
@@ -173,23 +173,27 @@ interface MatrixTransform {
   matrix: AnimatableNumericValue[];
 }
 
+type MaximumOneOf<T, K extends keyof T = keyof T> = K extends keyof T
+  ? {[P in K]: T[K]} & {[P in Exclude<keyof T, K>]?: never}
+  : never;
+
 export interface TransformsStyle {
   transform?:
-    | (
-        | PerpectiveTransform
-        | RotateTransform
-        | RotateXTransform
-        | RotateYTransform
-        | RotateZTransform
-        | ScaleTransform
-        | ScaleXTransform
-        | ScaleYTransform
-        | TranslateXTransform
-        | TranslateYTransform
-        | SkewXTransform
-        | SkewYTransform
-        | MatrixTransform
-      )[]
+    | MaximumOneOf<
+        PerpectiveTransform &
+          RotateTransform &
+          RotateXTransform &
+          RotateYTransform &
+          RotateZTransform &
+          ScaleTransform &
+          ScaleXTransform &
+          ScaleYTransform &
+          TranslateXTransform &
+          TranslateYTransform &
+          SkewXTransform &
+          SkewYTransform &
+          MatrixTransform
+      >[]
     | string
     | undefined;
   /**
diff --git a/packages/react-native/types/__typetests__/animated.tsx b/packages/react-native/types/__typetests__/animated.tsx
index bee061fb72d..7bee861b77c 100644
--- a/packages/react-native/types/__typetests__/animated.tsx
+++ b/packages/react-native/types/__typetests__/animated.tsx
@@ -237,6 +237,8 @@ function TestAnimatedAPI() {
         }}
       />
       ;
+      {/* @ts-expect-error the transform object must contain only one key-value pair */}
+      <Animated.View style={{transform: [{scale: 1, translateX: 20}]}} />;
     </View>
   );
 }