[TypeScript] [Stylesheet] TS2322 error thrown when transform property is used in a style object returned from a function

[hieucd04]

Steps to reproduce

1. Checkout reproducer
2. Open terminal and run yarn reproduce

Actual Result: Error is thrown
Expected Result: No error is thrown

More info:

• Revert to react-native: 0.72.7 will fix this issue
• Potential source of this issue:
  • chore: stricter TS check for transform style #38348
  • e414713

React Native Version

0.73.0

Affected Platforms

Build - Windows

Output of npx react-native info

System:
  OS: Windows 11 10.0.22631
  CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
  Memory: 107.57 GB / 127.75 GB
Binaries:
  Node:
    version: 18.17.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.21
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 9.6.7
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: Not Found
  Visual Studio: Not Found
Languages:
  Java:
    version: 20.0.1
    path: C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.0
    wanted: 0.73.0
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

the-bug-is-here.ts:8:7 - error TS2322: Type '() => { transform: ({ translateX: number; rotateX?: undefined; } | { rotateX: string; translateX?: undefined; })[]; }' is not assignable to type 'StyleCreator'.
  Call signature return types '{ transform: ({ translateX: number; rotateX?: undefined; } | { rotateX: string; translateX?: undefined; })[]; }' and 'ViewStyle' are incompatible.
    The types of 'transform' are incompatible between these types.
      Type '({ translateX: number; rotateX?: undefined; } | { rotateX: string; translateX?: undefined; })[]' is not assignable to type 'string | (({ perspective: AnimatableNumericValue; } & { rotate?: never; rotateX?: never; rotateY?: never; rotateZ?: never; scale?: never; scaleX?: never; scaleY?: never; ... 4 more ...; matrix?: never; }) | ... 11 more ... | ({ ...; } & { ...; }))[]'.
        Type '({ translateX: number; rotateX?: undefined; } | { rotateX: string; translateX?: undefined; })[]' is not assignable to type '(({ perspective: AnimatableNumericValue; } & { rotate?: never; rotateX?: never; rotateY?: never; rotateZ?: never; scale?: never; scaleX?: never; scaleY?: never; translateX?: never; translateY?: never; skewX?: never; skewY?: never; matrix?: never; }) | ... 11 more ... | ({ ...; } & { ...; }))[]'.
          Type '{ translateX: number; rotateX?: undefined; } | { rotateX: string; translateX?: undefined; }' is not assignable to type '({ perspective: AnimatableNumericValue; } & { rotate?: never; rotateX?: never; rotateY?: never; rotateZ?: never; scale?: never; scaleX?: never; scaleY?: never; translateX?: never; translateY?: never; skewX?: never; skewY?: never; matrix?: never; }) | ... 11 more ... | ({ ...; } & { ...; })'.
            Type '{ translateX: number; rotateX?: undefined; }' is not assignable to type '({ perspective: AnimatableNumericValue; } & { rotate?: never; rotateX?: never; rotateY?: never; rotateZ?: never; scale?: never; scaleX?: never; scaleY?: never; translateX?: never; translateY?: never; skewX?: never; skewY?: never; matrix?: never; }) | ... 11 more ... | ({ ...; } & { ...; })'.
              Type '{ translateX: number; rotateX?: undefined; }' is not assignable to type '{ matrix: AnimatableNumericValue[]; } & { perspective?: never; rotate?: never; rotateX?: never; rotateY?: never; rotateZ?: never; scale?: never; scaleX?: never; scaleY?: never; translateX?: never; translateY?: never; skewX?: never; skewY?: never; }'.
                Property 'matrix' is missing in type '{ translateX: number; rotateX?: undefined; }' but required in type '{ matrix: AnimatableNumericValue[]; }'.

Reproducer

https://github.com/hieucd04/reproducer-react-native

Screenshots and Videos

No response

[hieucd04]

Reproducer added

[huntie]

@hieucd04 I can't reproduce the error, using the project-specified version of TypeScript installed to node_modules. Are you using an old TypeScript version in your IDE?

[hieucd04]

@huntie Can you try it one more time using cmd yarn run reproduce instead?

---

More info:

• The reproduce cmd was added by me in this commit: https://github.com/hieucd04/reproducer-react-native/commit/8e11fd233548601623e062a2edb03888d5c3e56a
• The yarn tsc --project tsconfig.json doesn't seem to do anything on my side. Well, at least it doesn't attempt to compile the-bug-is-here.ts file because I turned off noEmit and I didn't see any js file emitted.
• I also tried reverting back to react-native: 0.72.7 then ran the cmd again. The error was not there.

[NickGerleman]

If I add a synthetic error to the file, yarn tsc will pick it up, so it is being picked up.

Running tsc directly on a file means "write it out to JS using compiler defaults" according to https://www.typescriptlang.org/docs/handbook/compiler-options.html#using-the-cli

It looks like this causes a type error then on the default config, but not the tsconfig we ship. Differences compared to the default include things like strictNullChecks.

[hieucd04]

@NickGerleman: I looked into the tsconfig.json file that the reproducer uses:

{
    "$schema": "https://json.schemastore.org/tsconfig",
    "display": "React Native",
    "compilerOptions": {
      "target": "esnext",
      "module": "es2015",
      "types": ["react-native", "jest"],
      "lib": [
        "es2019",
        "es2020.bigint",
        "es2020.date",
        "es2020.number",
        "es2020.promise",
        "es2020.string",
        "es2020.symbol.wellknown",
        "es2021.promise",
        "es2021.string",
        "es2021.weakref",
        "es2022.array",
        "es2022.object",
        "es2022.string"
      ],
      "allowJs": true,
      "jsx": "react-native",
      "noEmit": true,
      "isolatedModules": true,
      "strict": true,
      "moduleResolution": "bundler",
      "customConditions": ["react-native"],
      "allowImportingTsExtensions": true,
      "allowArbitraryExtensions": true,
      "resolveJsonModule": true,
      "resolvePackageJsonImports": false,
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      // Causes issues with package.json "exports"
      "forceConsistentCasingInFileNames": false
    },
    "exclude": [
      "node_modules",
      "babel.config.js",
      "metro.config.js",
      "jest.config.js"
    ]
  }

The reason running yarn tsc doesn't produce any error is because of "strict": true. If I set "strict": false then yarn tsc will fail. This looks weird to me. I have seen devs disabling strict to avoid problems but never the other way around.

---

So now we understand the problem, hopefully, I need confirmation from React Native team to derive a solution of my own:

• Will React Native team acknowledge this as an issue and implement a fix for it? Or ...
• There are no issue here. This is the way React Native team want it to work?

[NickGerleman]

I don’t think we’ve been forced to think about whether the strict mode option is a requirement. Ideally I think it wouldn’t be, since it is slightly opinionated, and not all existing RN code is compatible with it (but subjectively, you really should be using it).

I would recommend sticking to using the template config though. The tsconfig we ship is tuned to support the features of React Native, and there may be cases in the future where the default settings do not work (e.g. we have considered using the package.json exports field before, which requires different resolution settings than the TypeScript default).

[tjzel]

I think the real problem here is not with aforementioned PR #38348 - which I consider beneficial. TypeScript here just infers a wider type than we would like it to. To fix this all you need to do is:

diff --git a/ReproducerApp/the-bug-is-here.ts b/ReproducerApp/the-bug-is-here.ts
index 9eea77e..cddd792 100644
--- a/ReproducerApp/the-bug-is-here.ts
+++ b/ReproducerApp/the-bug-is-here.ts
@@ -9,5 +9,5 @@ const styleCreator: StyleCreator = function () // Doesn't work. TS2322 error is
 {
     return {
         transform: [{translateX: 15}, {rotateX: "45deg"}]
-    };
+    } as ViewStyle; // or even better TransformsStyle
 };

to make it go away.

[NickGerleman]

I learned from @eps1lon that DefinitelyTyped itself checks with strictNullChecks, and that our own type tests model that, and are clean with transform usage. https://github.com/facebook/react-native/blob/main/packages/react-native/types/tsconfig.json

I think if DT only checks against strictNullChecks, we should require it as well.