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

Reproduisez le crash dans le TypeScript Playground lié en utilisant l’exemple JSX et le type de children de template literal. Commencez par suivre la vérification de la prop children de JSX pour les valeurs situées entre les balises ouvrante et fermante, puis vérifiez que le comportement attendu fonctionne sans casser le passage de props nommées.