Intellisense breaks when omit is used

[mvestergaard]

I've encountered some issues when using Omit to filter prop types for react components. I was not able to replicate it on the typescript playground, so it appears to only happen for more complex types? I was able to reproduce it when trying to omit certain props from the default props of react-select.

TypeScript Version: Have replicated on 3.3.3, 3.4.5, 3.5.2 and 3.6.0-dev.20190704

Search Terms:
omit intellisense

Code

import React from "react";
import { Props } from "react-select/base";

interface WithoutOmit extends Props {}

export const SelectWithoutOmit: React.FC<WithoutOmit> = ({
    // trigger auto-complete here, works fine

}) => <div />;

interface WithOmit extends Omit<Props, "onChange" | "value"> {}

export const SelectWithOmit: React.FC<WithOmit> = ({
    // trigger auto-complete here, doesn't work
    
}) => <div />;

Reproduction repository can be found here https://github.com/mvestergaard/typescript-omit-repro

Expected behavior:
Intellisense should show available properties when Omit is used

Actual behavior:
It doesn't show any properties

Playground Link:

Related Issues:

[mvestergaard]

I've narrowed down the root cause of this being this definition in the react-select typings:

export type SelectComponentsProps = { [key in string]: any }; // <-- this

export interface Props<OptionType = { label: string; value: string }> extends SelectComponentsProps {

Is it expected behavior in this case, and if not, can you think of a workaround?

[mvestergaard]

Here's a playground link that replicates it in a more contained scenario:
https://www.typescriptlang.org/play/index.html#code/C4TwDgpgBAggdiACgJwPZgEIEMDO0C8UA3lANoDWEIUAlnFDsMnQOYC6AXFFglAL4BuAFBC6wCMgBmWAMbQAwqgC2S1HBTocxIVG5dGzOC2G6ARvqasTUGRcPGhfEaEhQA6jWAALVAFdg8EhoYFCEiipqGmA4wmIS0nLunl6BUVAQAB7icAAmWuGq6sE4ADSwCFHYeMROQi7QMADySp7iOR7efgG8hM2eADwdPv6pwWUA5FjjAHzC9bB9wG1DgaFQi4PJo+gTU7MiMmqMUADuyV2BXE0tSxDt5yM92roA9C+0cJISEHCJJ6jIcg4RzCISHODHM7eS4LG7LLZPIg6KBvD5fZA-RKmNCUOAgoA

[mvestergaard]

Managed to find a workaround by inferring the actual keys with this:

type KnownKeys<T> = { [K in keyof T]: string extends K ? never : number extends K ? never : K } extends { [_ in keyof T]: infer U } ? U : never;

export type SelectProps<T> = Pick<ReactSelectProps<T>, KnownKeys<ReactSelectProps<T>>>;

[evanpurkhiser]

More of an explanation here for those looking https://stackoverflow.com/questions/60636985/why-i-cant-use-omit-on-asyncprops-of-react-select