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

Riproduci il crash nel TypeScript Playground collegato usando l’esempio JSX e il tipo di children di template literal. Inizia tracciando il controllo della prop children di JSX per i valori tra i tag di apertura e chiusura, quindi verifica che il comportamento previsto funzioni senza interrompere il passaggio di props con nome.