How do I couple matching constraints?

[sleek shard]

samholmes#5039

Playground Link

Preview:```ts
import * as React from "react"
import {useMemo} from "react"
import {
ImageStyle,
StyleProp,
TextStyle,
ViewStyle,
} from "react-native"

declare type ThemeProps = any
declare function useTheme(): any

interface StyleProps {
style?: StyleProp<any>
}
type ValidStyles =
| ImageStyle
| TextStyle
| ViewStyle
| ValidStyles[]
...```

You can choose specific lines to embed by selecting them before copying the link.

[barren umbra]

Am I understanding correctly, that the issue is Omit<T, 'style'> does not couple the constraints of any subtypes of T?

So if T extends X then Omit<T, 'style'> will be Omit<X, 'style'> only and if T is instantiated with any other subtype of X, then Omit<X, 'style'> will remain rather than Omit<SubtypeOfX, 'style'>?

[warm mural]

the issue is that style may be arbitrarily specific in subtypes of StyleProps. for example usage sites of styled are allowed to look like this:

styled<{
  style: StyleProp<any> & { someSuperSpecificThing: true }
}>(...)

but your code will never provide someSuperSpecificThing even though the caller expects it

[barren umbra]

I want the returned component StyledComponent to not have a style prop, but the Component should. That's why I attempted to type StyledComponent with Omit<BaseProps, 'style'>.

someSuperSpecificThing should be provided to Component because {...prop} is provided, and the type of props is Omit<BaseProps, 'style'> & Props which is missing the style property, but that is provided by style={styles} where the type of styles is ValidStyles.

[warm mural]

it's possible i'm missing something... you said:

someSuperSpecificThing should be provided to Component [...] that is provided by style={styles} where the type of styles is ValidStyles
but ValidStyles doesn't have someSuperSpecificThing as a property

[warm mural]

i removed/stubbed out the react stuff to be able to provide a concrete example of the kind of problem typescript is trying to protect you from:

[sleek shard]

mkantor#7432

Playground Link

Preview:ts type ImageStyle = {ImageStyle: true} type TextStyle = {TextStyle: true} type ViewStyle = {ViewStyle: true} type StyleProp<T> = {StyleProp: T} type FakeComponent<T> = (x: T) => unknown function useMemo<T>( factory: () => T, _deps: unknown[] ): T { return factory() ...

You can choose specific lines to embed by selecting them before copying the link.

[warm mural]

and here's a simplified version that might be easier to grok since it removes some unnecessary details: