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

Tái hiện crash trong TypeScript Playground được liên kết bằng ví dụ JSX và kiểu children của template literal. Bắt đầu bằng cách lần theo việc kiểm tra prop children của JSX đối với các giá trị nằm giữa thẻ mở và thẻ đóng, sau đó xác minh rằng hành vi mong đợi hoạt động mà không làm hỏng việc truyền các prop có tên.