[Should be TypeScript-Website] Issue report (angle-bracket style assertion and JSX) for TypeScript Playground about default configs

[LouisSung]

Suggestion

As shown in the TypeScript Playground (as of v4.3.5) and screenshoots, the angle-bracket style assertion conflicts with the default config of Playground with JSX enabled (JSX: React), where as set to None could fix this issue.

---

This is a bug (or not even one) for Playground rather than TypeScript language itself so I didn't report it as a bug.
However, the playground is important for everyone to try a piece of code as quick as possible. It would be better to disable the default JSX config in order not to violate the valid TypeScript syntax.

TS error message:
JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.(7026)
JSX element 'string' has no corresponding closing tag.(17008)

On the other hand, I wonder if there could be a bug report page or contact info on the Playground website (I know the maintainers might not want such a directly contact though _(;3
By a quick search, I found the original issue #2246 on implementing such a Playground page as well as the microsoft/TypeScript-Playground-Samples repo, but not sure if there's any formal channel for reporting such an issue in the future.

---

🔍 Search Terms

Playground, default TS Config, angle-bracket style assertion, and JSX syntax

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

1. Remove the default TS Config for JSX: React on https://www.typescriptlang.org/play
2. Add a formal channel (e.g., an issue report page or maintainer's contact info) for TypeScript Playground

📃 Motivating Example

Thanks to the original post @Facebook for reporting this issue
It might not be a critical issue but it may influence the user experience for the beginner of TypeScript. Hopefully this issue report could make them a better TS coding life :D

💻 Use Cases

N/A

[MartinJohns]

You're looking for: https://github.com/microsoft/TypeScript-Website

And IMO this is no big deal. Just use the alternative syntax: foo as T - they do absolutely the same.

[LouisSung]

Thank you for the quick reply and I'll close the issue here !
I just miss that repo :(

---

Yes, I know the other as style syntax is also available (and I always use it personally); however, some of the sample code (e.g., like the original post) is provided with the angle-bracket style.

Actually, there's a typescript-eslint rule called consistent-type-assertions to limit the syntax of type assertion (also uses assertionStyle: 'as' by default)

However, if I were the designer of the Playground and need to make a trade-off between official TypeScript syntax (<Type>foo) and JSX syntax, I would rather pick the former one as it's part of the standard of TypeScript.