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.

Riproduci le diagnostiche TS1005 e TS1161 segnalate dall’esempio .ts contenente JSX e React.Component, quindi confronta il comportamento con un file .tsx. Determina dove TypeScript gestisce questi errori di parsing e i code fix per la ridenominazione dei file; il lavoro è completo quando per i casi descritti appare un suggerimento appropriato e sono coperti entrambi gli esempi.