TypeScript: react-native typings not work since typescript 3.1.1

In the same area of React Native I found a similar error, after the fix was applied and I think it can be a TypeScript error. I’ve extracted the relevant parts so the repro with the latest TSC is easy.

Code:

interface FlexStyle {
    width?: number;
}

interface ViewStyle extends FlexStyle {
    overflow?: "visible" | "hidden" | "scroll";
}

interface ImageStyle extends FlexStyle {
    overflow?: "visible" | "hidden";
}

type NamedStyles<T> = { [P in keyof T]: ViewStyle | ImageStyle };

type RegisteredStyle<T> = number & { __registeredStyleBrand: T };

type Foo = {
    bar: RegisteredStyle<ImageStyle>;
};

function create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): { [P in keyof T]: RegisteredStyle<T[P]> }
{
    return null;
}

const fooStyles: Foo = create<NamedStyles<Foo>>({
    bar: {
        width: undefined
    }
});

After calling TSC test.ts, this is the error:

test.ts:26:7 - error TS2322: Type '{ bar: RegisteredStyle<ViewStyle | ImageStyle>; }' is not assignable to type 'Foo'.
  Types of property 'bar' are incompatible.
    Type 'RegisteredStyle<ViewStyle | ImageStyle>' is not assignable to type 'RegisteredStyle<ImageStyle>'.
      Type 'RegisteredStyle<ViewStyle | ImageStyle>' is not assignable to type '{ __registeredStyleBrand: ImageStyle; }'.
        Types of property '__registeredStyleBrand' are incompatible.
          Type 'ViewStyle | ImageStyle' is not assignable to type 'ImageStyle'.
            Type 'ViewStyle' is not assignable to type 'ImageStyle'.
              Types of property 'overflow' are incompatible.
                Type '"hidden" | "visible" | "scroll"' is not assignable to type '"hidden" | "visible"'.
                  Type '"scroll"' is not assignable to type '"hidden" | "visible"'.

26 const fooStyles: Foo = create<NamedStyles<Foo>>({

overflow defined in 2 different interfaces and I think that TS compiler fails early on mismatching valuesets because the interface types are not related, but one of them could be the result of the create method call.

That is just the top of the cake that in React Native’s case, FlexStyle has the overflow property, so an the ImageStyle interface which extends FlexStyle “overwrites” the valueset, but this time I separated it for clarity.

Reduced example (same behavior in 3.0.3 and 3.2.0-dev.20180927):

interface TextStyle extends ViewStyle {
  fontWeight?: "900";
}
interface ViewStyle {
  marginTop?: number;
}

declare function create<T extends { [P in keyof T]: TextStyle | ViewStyle }>(styles: T): T;
const s = create({
  didNotWork: {
    fontWeight: '900', // if we comment this line, errors gone
    marginTop: 5, // if this line commented, errors also gone
  },
});
const f1: TextStyle = s.didNotWork;

I see the fix to react-native got stalled with the fix I suggested (because it adds a new requirement for arguments to have a string index signature). Let me suggest a different fix. Change react-native’s StyleSheet.create function in index.d.ts to have the following declaration:

export function create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T): { [P in keyof T]: RegisteredStyle<T[P]> };

The NamedStyles<any> part of the union type causes the constraint to have a string index signature (such that contextual types are provided), whereas the NamedStyles<T> part of the constraint ensures that a final inferred type without a string index signature is accepted.

Best I can tell this fixes the issue and doesn’t require any other changes.

@ScreamZ I don’t know… most probably we will not be able express such types reliable until typescript 10 or 20 😕 Changes suggested by typescript team simple did not work…