What is a .tsx file?

I understand that .tsx files are for React but that's about it..any insights?



A .tsx file is an extension for TypeScript that allows you to embed JSX in your file. TypeScript doesn't support JSX by default so you have to enable it in tsconfig.json etc.

  1. {
  2. "compilerOptions": {
  3. "module": "system",
  4. "noImplicitAny": true,
  5. "removeComments": true,
  6. "preserveConstEnums": true,
  7. "outFile": "../../built/local/tsc.js",
  8. "sourceMap": true,
  9. "jsx":"react"
  10. },
  11. "include": [
  12. "src/**/*"
  13. ],
  14. "exclude": [
  15. "node_modules",
  16. "**/*.spec.ts"
  17. ]
  18. }

Different options include "react", "preserve", "react-native", etc. These options have to do with how TypeScript compiler processes the JSX.

For example, with the default "preserve" option, TypeScript will output a .tsx file as a .jsx file with jsx still needing to be processed.

Likewise the "react" option will process the .tsx with React and output a .js file...


A .tsx file is a TypeScript file that supports JSX. This means you can use JSX syntax within your TypeScript file if it's a .tsx file.


A .tsx file becomes a .jsx file after it compiles.