Accept de-structured elements in type predicates

[rraziel]

Search Terms

• type predicate
• reference binding pattern
• type predicate cannot reference
• destructured

Suggestion

The possibility to use destructured parameters in type predicates.

Use Cases

Destructuring is heavily used in functional/reactive programming, notably with rxjs where various contextual properties tend to be passed between each operator.

Having the ability to succinctly test for types would make the code more readable, e.g.:

type Example = {
  a: number;
  b: string | undefined;
};

const example: Example = {
  a: 42,
  b: 'hello';
};

of(example).pipe(
  guard(({ b }): b is string => b !== undefined, 'b cannot be undefined'),
  tap({ b }) => { /* b is now a string rather than a string | undefined })
);

Right now the alternative is

of(example).pipe(
  guard((x): x is Omit<typeof x, 'b'> & { b: string } => x.b !== undefined, 'b cannot be undefined'),
  tap({ b }) => { /* b is now a string rather than a string | undefined })
);

Or, without a predicate

of(example).pipe(
  map(x => {
    if (x.b === undefined) {
      throw new Error();
    }

    return x;
  }),
  tap({ b }) => { /* b is now a string rather than a string | undefined })
);

Examples

function assertSomething(
  { property }: T
): property is AssertionHere {
  return true;
}

This would roughly translate to something like:

function assertSomething(
  obj: T
): obj is Omit<T, 'property'> & { property: AssertionHere } {
  return true;
}

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

[RyanCavanaugh]

Self-contained examples that don't assume importing/knowledge of rxjs would be very helpful

[manbearwiz]

I run into this when filtering the output of Object.entries. I find it much more readable to be able to reference key and value instead of pair[0] and pair[1]. Simplified example but demonstrates a use case outside of rxjs.

If I want all pairs from the query params that are arrays, I currently have to do:

const queryParams = {text: 'foo', statuses: ['status1', 'status2'], regions: []}

Object.entries(queryParams)
 .filter((pair): pair is [string, string[]] => Array.isArray(pair[1]))

or

Object.entries(queryParams)
  .filter(([_, value]) => Array.isArray(value))
  .map(pair => pair as [string, string[]])

I would prefer to do:

Object.entries(queryParams )
  .filter(([_, value]): value is string[] => Array.isArray(value))

[rraziel]

A simple-with-no-external-elements example could be:

type X = { value: number | string; };
const xs: Array<X> = [{ value: 42 }, { value: 'hello' }];

// without the feature
const filtered = xs
  .filter(({ value }) => typeof value === 'number')
  .map(x => x as { value: number })
;

// with the feature
const filtered = xs
  .filter(({ value }): value is number => typeof value === 'number')
;

[iBlueDust]

Ran into this problem in React.

I have a React context in the form of a class.
Unfortunately, trying something like

function assertSomething(
  obj: T
): obj is Omit<T, 'property'> & { property: AssertionHere } {
  return true;
}

in my project as suggested by @rraziel doesn't work.

Turns out, since Omit<SomeClass, 'someProperty'> throws all class methods away, intellisense rejects it as incompatible with SomeClass.

In my project, intellisense reported

Type 'Omit<RoomStore, 'room'> & { room: Room; }' is missing the following properties from type 'RoomStore': client, socket, setUser, setRoom, and 10 more.

In conclusion, it'll be real nice for this feature to be implemented (or this bug to be fixed).

[artu-ole]

I agree that this is a useful feature and an unfortunate oversight on typescript's part.
I would, however, note that @rraziel's workaround example can be slightly better versed by not causing an additional loop with map and using destructuring in the filter body to preserve readability.

const filtered = xs
  .filter((x): x is { value: number } => {
    const { value } = x;
    return typeof value === 'number';
  });

Same goes for array destructuring(my use case which involved rxjs's combineLatest)

type X = [ number | string ];
const xs: Array<X> = [[ 42 ], [ 'hello' ]];

// without the feature
const filtered = xs
  .filter((x) => {
    const [ value ] = x;
    return typeof value === 'number';
  })
;

// with the feature
const filtered = xs
  .filter(([ value ]): value is number => typeof value === 'number')
;

[Susccy]

Since this has the Awaiting More Feedback label I'd like to add that this is an important feature request from me as well.

[rgfretes]

+1

[Yohandah]

In need of this feature as well !!

With the feature :

combineLatest([this.route.paramMap, this.route.queryParamMap])
      .pipe(
        map(([parameters, queryParameters]: [ParamMap, ParamMap]) => [
          parameters.get('provider'),
          queryParameters.get('code'),
        ]),
        filter(([provider, code]: (string | null)[]): code is string => provider === 'something' && code !== null),
        map(([, code]: string[]) => code),
      )
      .subscribe((code: string) => {
        //stuff
      });

[dominik-widomski-jm]

This would be pretty neat! Example of how I would have liked to use this (bit of a compacted example):

const dataFields = Array.from(formData)
    .filter(([key, value]): value is string => typeof value === "string" && ["foo"].includes(key))
    .map(([key, value]) => ({ key, value }));
    
    
fetch("some/endpoint", {
  ...
  body: JSON.stringify({ dataFields }), // dataFields type should be { key: string; value: string }[]
});

Explanation:
I'm going over a form submission, whitelisting certain fields by keys. Later when I send it to an API, I know that the value fields need to be strings where as per TS formData: FormData entries are type FormDataEntryValue = File | string;, I just don't want the File in there.

[Wytrykus]

+1

I'd like to support this suggestion, too.

[konstantinmv]

Want to support this issue as well.

Here's our case:
We've got a type which looks like the following:
{ success: boolean, result: Success[] | Error[] }

We were trying to create a predicate which shows which type of result is returned based on the boolean success value -> but since desctructuring isn't available, this does not work out so well.

Thanks in advance!