Template Literal Type JSX children prop issue

🔎 Search Terms

"2745", "template literal type", "multiple children", "single child"

🕗 Version & Regression Information

• This is a crash

⏯ Playground Link

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARFDvmQNwBQdBArgHb7AQtwCCYYAFAEo4Abzpw4lGEyhd+4iXAA8APgWLRAeiQAVABbB0Ad2gBrdGjhYAHmCz4sAE0SaAvusVKAwiUgssLDAA6sAwejpY4AA2yDBYADKhWFDIUToAnnZeBlGOlCwACsRgcLg5eQEAvGTIAPp6WFFREGQqSpo+4JwBwaHhkWAxcYlxKWmZWNnAuflFEGBqHhIi2nD6hnAAUgDKABpwMMgA5gDk6Cdl0xUsJ3BgxVa29jDoMBNwJwAGdQAkIqgwKDAFhHVyfOAAHzgnwARrU-gCgSCwbcjAYypIsABHJjASjoEBMKIwYCDLClcr5AA0cBhTHgnCi6RQcFQwKOUXJl1ycCMlnuEAAbsBHE4AHRwfgAJgA7AAWACswgQbiWyk6fh6ITCEWisQSSTGGSylICcwWdQaTQg7Q13UC2v6euGhtSxsmpsKxTUGnaPrggno7jobzscCKWAIwGscEqHzqtyhJzhJ3oofJ5tj0L+Eaj1lcCMB7LB9EYrHYnDgdv8Dr6usG+pGyTdEymMzNxX4IgpV3ycFcAC5RD32ywh5nXMIxBIpDIuEpUGBkCwVCJuddXO1F8uVEG6EA

💻 Code

function App() {
  return (
    <>
      {/* This works as expected */}
      <ComponentWithTemplateLiteralTypeChildrenProp children="a_hello"></ComponentWithTemplateLiteralTypeChildrenProp>

      {/* This JSX tag's 'children' prop expects type '`a_${string}` | `b_${string}`' which requires multiple children, but only a single child was provided. (2745) */}
      <ComponentWithTemplateLiteralTypeChildrenProp>a_hello</ComponentWithTemplateLiteralTypeChildrenProp>
    </>
  );
}

type Prefix = 'a_' | 'b_';
type Prop = `${Prefix}${string}`;

function ComponentWithTemplateLiteralTypeChildrenProp({ children }: { children: Prop }) {
  return <span>{children}</span>;
}

🙁 Actual behavior

A Template Literal Type "children" prop does not allow the prop to be passed between the open/close tags. Passing the value via a prop works.

🙂 Expected behavior

It should be possible to pass a Template Literal Type "children" prop in between the open/close tags. Not only via a named prop.

Additional information about the issue

No response

Reproduce the crash in the linked TypeScript Playground using the JSX example and template literal children type. Start by tracing JSX children-prop checking for values between opening and closing tags, then verify that the expected behavior works without breaking named-prop passing.