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.

Reproduce the reported TS1005 and TS1161 diagnostics from the .ts example containing JSX and React.Component, then compare the behavior with a .tsx file. Determine where TypeScript handles these parsing errors and file-renaming code fixes; done means a suitable suggestion appears for the described cases with coverage for both examples.