Suggest renaming file from .ts to .tsx if needed?

Search Terms

ts tsx react jsx rename file errors

Suggestion

When adding JSX elements (React) to a .ts file rather than a .tsx file, error messages aren't clear that it should be a .tsx file. If it's clear the user is intending to write JSX code, such as having multiple JSX-like components and/or components that extend React.Component, can a code fix be given (on the file? on individual <>-related parsing errors?) to rename to .tsx?

Use Cases

There's been some buzz on Twitter lately about how easy it is to forget to rename to .tsx. Some users are apparently even used to writing JSX in .js, so the need to use .tsx is a bit confusing for them.

Examples

Given this file.ts:

import * as React from "react";

export class ComponentClass extends React.Component {
    public render() {
        return <span />;
        // index.ts(5,22): error TS1005: '>' expected.
        // index.ts(5,23): error TS1161: Unterminated regular expression literal.
    }
}

export const ComponentArrow = () => <span />;
// index.ts(11,43): error TS1005: '>' expected.
// index.ts(11,44): error TS1161: Unterminated regular expression literal.

Would it be possible to special-case just from these errors to suggest to rename the file? Alternately, if we just have the ComponentArrow errors, would it still be possible to suggest to rename the file?

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.

Reproduziere die gemeldeten TS1005- und TS1161-Diagnosen aus dem .ts-Beispiel, das JSX und React.Component enthält, und vergleiche anschließend das Verhalten mit einer .tsx-Datei. Ermittle, wo TypeScript diese Parsing-Fehler und Codefixes zur Dateiumbenennung behandelt; als erledigt gilt die Aufgabe, wenn für die beschriebenen Fälle ein geeigneter Vorschlag erscheint und beide Beispiele abgedeckt sind.