[Bug] JSX property generic inference dumber than function object generic infernce

[jeengbe]

Bug Report

I have difficulty naming the issue, please suggest/make changes to the title/search terms.

🔎 Search Terms

Function, JSX, inferring, generic, difference, inference priority

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about n/a

⏯ Playground Link

Playground link with relevant code

💻 Code

import React from "react";

type TranslationEntry = {
    args: [] | [unknown];
}
type Translations = {
    a: { args: [string] },
    b: { args: [] }
}

// Relation:
// Translations satisfies Record<string, TranslationEntry>

// If the selected translation entry requires arguments, intersect with object that requires 'args'
type TProps<Entry extends TranslationEntry> = {
    getTranslationEntry: (allTranslations: Translations) => Entry,
} & (Entry["args"] extends [unknown] ? {
    args: Entry["args"][0]
} : {});

declare function T<Entry extends TranslationEntry>(
    props: TProps<Entry>
): JSX.Element;

// Calling the function directly works
T({
    getTranslationEntry: (allTranslations) => allTranslations.a,
    args: "a"
});

// But the JSX version, however, doesn't
<T
    getTranslationEntry={(allTranslations) => allTranslations.a}
    args="a"
//  ^^^^ Property 'args' does not exist on type 'IntrinsicAttributes & { getTranslationEntry: (allTranslations: Translations) => TranslationEntry; }'
/>

To add some context to above code

<T /> is a component that uses the form <T getTranslationEntry={ t => t.xyz } /> to specify which translation (entry) to display. Depending on what's selected, additional arguments are required.
In order to be able to omit the args prop when not required, the intersection with

(Entry["args"] extends [unknown] ? {
    args: Entry["args"][0]
} : {})

does this.

🙂 Expected behavior

As it does for the function call, for the JSX element should infer it's generic parameter E to { args: [string] }. Because of this, Entry["args"] extends [unknown] ? ... : { } then correctly resolves to { args: string }

🙁 Actual behavior

Entry["args"] extends [unknown] ? ... : { } resolves to { } instead, but strangely only for the JSX variant.

💡 Other

What is most confusing is the following seeming contradiction:

  <T
// ^Property 'args' is missing in type '{ getTranslationEntry: (allTranslations: Translations) => { args: [string]; }; }' but required in type '{ args: string; }'.
    getTranslationEntry={(allTranslations) => allTranslations.a}
/>;


<T
    getTranslationEntry={(allTranslations) => allTranslations.a}
    args="a"
//  ^^^^ Property 'args' does not exist on type 'IntrinsicAttributes & { getTranslationEntry: (allTranslations: Translations) => TranslationEntry; }'.
/>;

[jeengbe]

What is most confusing is the following seeming contradiction:

My guess is that without the args prop, the <Entry> generic is inferred correctly, thus the error. With the prop specified, args: Entry["args"][0] has a higher inference priority than getTranslationEntry: (allTranslations: Translations) => Entry. From that term alone, Entry cannot be deduced, and thus falls back to the generic constraint TranslationEntry.
Now, Entry["args"] = TranslationEntry["args"] = ([] | [unknown]) which no longer extends [unknown]: { args } is no longer required and the Property 'args' does not exist error is reported.

[jeengbe]

Since that issue does not happen with the function call, this suggests that function generics have some additional logic for inference priority, where terms like args: Entry["args"][0] from which Entry cannot be known have lower priority. And it seems this logic has not been ported to JSX props, which should behave the same way.

[AlQubaiisi]

Canary Mail You've received a secure email ***@***.*** has sent you a secure email via Canary Mail. Read Secure Email (https://secure.canarymail.io/read?obj_id=92a56bf4-c3ad-4b05-88cf-1a05dac27cb6&obj_key=MUU0SkErc3kyMkZYcnV1RU5NNEhFQT09&thr_id=92a56bf4-c3ad-4b05-88cf-1a05dac27cb6) If you expect to correspond often with ***@***.***, we recommend you download Canary Mail for free. Download Canary (https://canarymail.io) Privacy (https://canarymail.io/privacy.html) | Terms (https://canarymail.io/terms.html) | Docs (https://help.canarymail.io/) | Support (https://canarymail.zendesk.com/hc/en-us/requests/new) Copyright © 2021 Canary Mail, All rights reserved.