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.

Reproduisez les diagnostics TS1005 et TS1161 signalés à partir de l’exemple .ts contenant JSX et React.Component, puis comparez le comportement avec un fichier .tsx. Déterminez où TypeScript gère ces erreurs d’analyse et les code fixes de renommage de fichiers ; le travail est considéré comme terminé lorsqu’une suggestion appropriée apparaît pour les cas décrits et que les deux exemples sont couverts.