mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
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:
committed by
Facebook GitHub Bot
parent
0cdb9e6a52
commit
e414713e4c
+19
-15
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user