chore: stricter TS check for transform style (#38348)

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
This commit is contained in:
Vojtech Novak
2023-07-18 15:35:56 -07:00
committed by Facebook GitHub Bot
parent 0cdb9e6a52
commit e414713e4c
2 changed files with 21 additions and 15 deletions
@@ -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;
/**
@@ -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>
);
}