A syntax for function declarations to "implement" types (like `const C: React.FC<Props> = (props0) => ...`)

[gfx]

Search Terms

function,implements,type,interface

Suggestion

I'd like to make a function to implement types or interfaces. It is partially possible for variable declaration (e.g. const f: T = () => ...) but it is slightly different from what I'm issuing.

Use Cases & Examples

When making a React component.

It is a good practice to use React.FC<Props> when you make a React component like this:

import type React from "react";
type Props = { ... };
export const Foo: React.FC<Props> = (props) {
  ...
};

It's useful because a function component with a wrong return type doesn't compile. However, I think it's natural if I can declare implementing types for function declarations like this:

function Foo implements React.FC<Props> (props) {
  ...
}

(syntax doesn't matter; just for example)

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, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

[RyanCavanaugh]

Duplicate #34319

[gfx]

Cool. A use-case for React.FC<Props> is also explained at #34319 (comment)