From ed08edd966aa17764436042b8202704144d61861 Mon Sep 17 00:00:00 2001 From: Nick Gerleman Date: Thu, 15 Dec 2022 19:17:58 -0800 Subject: [PATCH] Fix Errors with TypeScript Tests Summary: This fixes some style errors found by dtslint, along with some test cases for StyleSheet.compose() where the recent change made it slightly too permissive when explicit return types are given. I also added runs of the TS tests to a script which runs in sandcastle so we can catch this at diff-submission time in the future. Changelog: [General][Fixed] - Fix Errors with TypeScript Tests Reviewed By: lunaleaps Differential Revision: D42085257 fbshipit-source-id: 7e6ca49d3c3aef822c61c97ecc07b55b0a949d51 --- Libraries/ReactNative/AppRegistry.d.ts | 8 +++--- Libraries/ReactNative/AppRegistry.js | 4 ++- Libraries/StyleSheet/StyleSheet.d.ts | 12 ++++++--- package.json | 3 ++- scripts/run-ci-javascript-tests.js | 7 +++++ types/__typetests__/index.tsx | 37 +++++++++++++++++++++----- 6 files changed, 56 insertions(+), 15 deletions(-) diff --git a/Libraries/ReactNative/AppRegistry.d.ts b/Libraries/ReactNative/AppRegistry.d.ts index d6fa9627581a9a..2e792e79b24021 100644 --- a/Libraries/ReactNative/AppRegistry.d.ts +++ b/Libraries/ReactNative/AppRegistry.d.ts @@ -30,7 +30,9 @@ export type ComponentProviderInstrumentationHook = ( scopedPerformanceLogger: IPerformanceLogger, ) => React.ComponentType; -export type WrapperComponentProvider = (any) => React.ComponentType; +export type WrapperComponentProvider = ( + appParameters: any, +) => React.ComponentType; /** * `AppRegistry` is the JS entry point to running all React Native apps. App @@ -50,7 +52,7 @@ export type WrapperComponentProvider = (any) => React.ComponentType; export namespace AppRegistry { export function setWrapperComponentProvider( provider: WrapperComponentProvider, - ); + ): void; export function registerConfig(config: AppConfig[]): void; @@ -94,7 +96,7 @@ export namespace AppRegistry { export function setComponentProviderInstrumentationHook( hook: ComponentProviderInstrumentationHook, - ); + ): void; export function registerHeadlessTask( taskKey: string, diff --git a/Libraries/ReactNative/AppRegistry.js b/Libraries/ReactNative/AppRegistry.js index 775acb7c95c27f..45c08d49f9971c 100644 --- a/Libraries/ReactNative/AppRegistry.js +++ b/Libraries/ReactNative/AppRegistry.js @@ -51,7 +51,9 @@ export type Registry = { runnables: Runnables, ... }; -export type WrapperComponentProvider = any => React$ComponentType; +export type WrapperComponentProvider = ( + appParameters: any, +) => React$ComponentType; const runnables: Runnables = {}; let runCount = 1; diff --git a/Libraries/StyleSheet/StyleSheet.d.ts b/Libraries/StyleSheet/StyleSheet.d.ts index b3325098207274..53ab3e1f2784ff 100644 --- a/Libraries/StyleSheet/StyleSheet.d.ts +++ b/Libraries/StyleSheet/StyleSheet.d.ts @@ -87,10 +87,14 @@ export namespace StyleSheet { * an array, saving allocations and maintaining reference equality for * PureComponent checks. */ - export function compose( - style1: StyleProp | Array>, - style2: StyleProp | Array>, - ): StyleProp; + export function compose< + T extends ViewStyle | TextStyle | ImageStyle, + U extends T, + V extends T, + >( + style1: StyleProp | Array>, + style2: StyleProp | Array>, + ): StyleProp; /** * WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will diff --git a/package.json b/package.json index dcc039482bac39..c18c384cbd952b 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,8 @@ "test-e2e-local": "node ./scripts/test-e2e-local.js", "test-e2e-local-clean": "node ./scripts/test-e2e-local-clean.js", "test-ios": "./scripts/objc-test.sh test", - "test-typescript": "dtslint types" + "test-typescript": "dtslint types", + "test-typescript-offline": "dtslint --localTs node_modules/typescript/lib types" }, "peerDependencies": { "react": "18.2.0" diff --git a/scripts/run-ci-javascript-tests.js b/scripts/run-ci-javascript-tests.js index bdb9fedd7c7e77..30fee2573f955a 100644 --- a/scripts/run-ci-javascript-tests.js +++ b/scripts/run-ci-javascript-tests.js @@ -65,6 +65,13 @@ try { throw Error(exitCode); } + describe('Test: TypeScript tests'); + if (exec(`${YARN_BINARY} run test-typescript-offline`).code) { + echo('Failed to run TypeScript tests.'); + exitCode = 1; + throw Error(exitCode); + } + exitCode = 0; } finally { // Do cleanup here diff --git a/types/__typetests__/index.tsx b/types/__typetests__/index.tsx index f530b0702fcbf8..768b798bafd861 100644 --- a/types/__typetests__/index.tsx +++ b/types/__typetests__/index.tsx @@ -291,24 +291,49 @@ const combinedStyle6: StyleProp = StyleSheet.compose( null, ); -// The following use of the compose method is invalid: -// @ts-expect-error -const combinedStyle7 = StyleSheet.compose(composeImageStyle, composeTextStyle); +const page = StyleSheet.create({ + container: { + flex: 1, + padding: 24, + backgroundColor: '#fff', + }, + text: { + fontSize: 30, + color: '#000', + }, +}); -// @ts-expect-error +const lists = StyleSheet.create({ + listContainer: { + flex: 1, + backgroundColor: '#61dafb', + }, + listItem: { + fontStyle: 'italic', + fontWeight: 'bold', + }, +}); + +const container = StyleSheet.compose(page.container, lists.listContainer); +; +const text = StyleSheet.compose(page.text, lists.listItem); +; + +// The following use of the compose method is invalid: const combinedStyle8: StyleProp = StyleSheet.compose( + // @ts-expect-error composeTextStyle, composeTextStyle, ); -// @ts-expect-error const combinedStyle9: StyleProp = StyleSheet.compose( + // @ts-expect-error [composeTextStyle], null, ); -// @ts-expect-error const combinedStyle10: StyleProp = StyleSheet.compose( + // @ts-expect-error Math.random() < 0.5 ? composeTextStyle : null, null, );