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.

Tái hiện các chẩn đoán TS1005 và TS1161 đã được báo cáo từ ví dụ .ts chứa JSX và React.Component, sau đó so sánh hành vi với một tệp .tsx. Xác định nơi TypeScript xử lý các lỗi phân tích cú pháp này và các code fix đổi tên tệp; hoàn thành khi một đề xuất phù hợp xuất hiện cho các trường hợp được mô tả và cả hai ví dụ đều có coverage.