Template Literal Type JSX children prop issue

[vjee]

🔎 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

[Andarist]

I wonder what @RyanCavanaugh might have to say about it but it seems to me that the ROI of the requested feature would be quite low. I agree that it's weird.

FWIW: createJsxChildren always assume a stringType here: https://github.dev/microsoft/TypeScript/blob/d8086f14b6b97c0df34a0cc2f56d4b5926a0c299/src/compiler/checker.ts#L32972-L32974 This could be contextually-typed. To properly type this string contextually it should likely be massaged through something like fixupWhitespaceAndDecodeEntities: https://github.com/microsoft/TypeScript/blob/d8086f14b6b97c0df34a0cc2f56d4b5926a0c299/src/compiler/transformers/jsx.ts#L572

[RyanCavanaugh]

Doesn't feel like it should be a lot of work