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

@@ -30,7 +30,9 @@ export type ComponentProviderInstrumentationHook = (
   scopedPerformanceLogger: IPerformanceLogger,
 ) => React.ComponentType<any>;
 
-export type WrapperComponentProvider = (any) => React.ComponentType<any>;
+export type WrapperComponentProvider = (
+  appParameters: any,
+) => React.ComponentType<any>;
 
 /**
  * `AppRegistry` is the JS entry point to running all React Native apps.  App
@@ -50,7 +52,7 @@ export type WrapperComponentProvider = (any) => React.ComponentType<any>;
 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,

Libraries/ReactNative/AppRegistry.js

@@ -51,7 +51,9 @@ export type Registry = {
   runnables: Runnables,
   ...
 };
-export type WrapperComponentProvider = any => React$ComponentType<any>;
+export type WrapperComponentProvider = (
+  appParameters: any,
+) => React$ComponentType<any>;
 
 const runnables: Runnables = {};
 let runCount = 1;

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<T, U>(
-    style1: StyleProp<T> | Array<StyleProp<T>>,
-    style2: StyleProp<U> | Array<StyleProp<U>>,
-  ): StyleProp<T & U>;
+  export function compose<
+    T extends ViewStyle | TextStyle | ImageStyle,
+    U extends T,
+    V extends T,
+  >(
+    style1: StyleProp<U> | Array<StyleProp<U>>,
+    style2: StyleProp<V> | Array<StyleProp<V>>,
+  ): StyleProp<T>;
 
   /**
    * WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will

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"

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

types/__typetests__/index.tsx

@@ -291,24 +291,49 @@ const combinedStyle6: StyleProp<TextStyle | null> = 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);
+<View style={container} />;
+const text = StyleSheet.compose(page.text, lists.listItem);
+<Text style={text} />;
+
+// The following use of the compose method is invalid:
 const combinedStyle8: StyleProp<ImageStyle> = StyleSheet.compose(
+  // @ts-expect-error
   composeTextStyle,
   composeTextStyle,
 );
 
-// @ts-expect-error
 const combinedStyle9: StyleProp<ImageStyle> = StyleSheet.compose(
+  // @ts-expect-error
   [composeTextStyle],
   null,
 );
 
-// @ts-expect-error
 const combinedStyle10: StyleProp<ImageStyle> = StyleSheet.compose(
+  // @ts-expect-error
   Math.random() < 0.5 ? composeTextStyle : null,
   null,
 );