Was ist der Unterschied zwischen .ts- und .tsx-Erweiterungen in TypeScript für React?

Hallo zusammen! Ich habe kürzlich angefangen, TypeScript in Kombination mit React zu lernen und bin auf eine für mich unklare Situation gestoßen. Wenn ich Komponenten erstelle, sehe ich, dass in Projekten zwei verschiedene Erweiterungen verwendet werden: `.ts` und `.tsx`. Zum Beispiel habe ich eine Datei `Button.ts` und eine Datei `App.tsx`. Beide enthalten TypeScript-Code, aber wenn ich versuche, JSX innerhalb einer `.ts`-Datei zu schreiben, beschwert sich der Code-Editor, und wenn ich sie in `.tsx` umbenenne, funktioniert alles. Hier ist ein Beispiel meines Codes, der in `Button.ts` nicht funktioniert: ```typescript import React from 'react'; interface ButtonProps { label: string; onClick: () => void; } // Fehler: JSX wird in .ts-Dateien nicht unterstützt const Button: React.FC = ({ label, onClick }) => { return {label}; }; ``` Und derselbe Code funktioniert einwandfrei, wenn die Datei als `Button.tsx` gespeichert wird. Außerdem habe ich bemerkt, dass einige meiner Kollegen `.ts` für einfache Utilities und Typen verwenden, während `.tsx` nur für Komponenten mit Markup genutzt wird. Aber gibt es eine strikte Regel?