Add Support for Flow's new component syntax

🔍 Search Terms

"syntax", "flow", "component", "tsx"

✅ Viability Checklist

• 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 isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

First of all, I'd like to apologize; this request doesn't satisfy the last three viability checks. But I couldn't submit this if I didn't mark them. That said, if someone from the typescript team could at least read this proposal, I would be extremely grateful.

Recently, flow has added a new syntax to write components and hooks. For react devs, that's huge, and as someone who uses (and loves) typescript, I'd love to have something like this on TSX files too.

I understand that there are a few limitations on what can be done in typescript; for example, I don't expect typescript to check the rules of hooks and other react-specific things. I know that things like Solid and Stencil also use JSX.

To be completely blunt: I WANT SUGAR. Most influencers covering this new feature mentioned that it's extremely unlikely that Typescript will implement it. But I decided to try anyway, even if just to understand the reason.

In a more practical sense, here's what I would expect to see in a realist scenario:

• The changes would only affect TSX files.
• component blocks would be transpiled into function components.
• hook blocks would be transpiled into functions.
• Render types are nice. If I'm correct there's some arcane way of doing the same in typescript, but getting something more explicit wouldn't hurt.

📃 Motivating Example

Here's the post that explains what I'm talking about: https://medium.com/flow-type/announcing-component-syntax-b6c5285660d0

💻 Use Cases

1. What do you want to use this for? Pure and refined Syntax Sugar.
2. What shortcomings exist with current approaches? For components, there are 5-6 ways to deal with props currently, but the new component syntax has the potential to unify how things are done, reducing friction for new developers in large code bases. I recommend checking this video: https://youtu.be/HOFIefkepMA?si=i45CFr72m2GCaH5l
3. What workarounds are you using in the meantime? It's not impossible to write another tool that will take this syntax and output typescript, but that would be yet another tool in an already bloated web dev ecosystem.

首先阅读链接的 Flow component-syntax proposal，并将其中的 component 和 hook 块与所要求的 TSX-only 行为进行比较。在确定相关的 TypeScript compiler entry points 和测试之前，先定义语法、render 类型以及函数转译要求；当该 proposal 具有经过同意且可测试的范围时，即视为完成。