--- title: What is the difference between a .ts and .tsx file... description: The post explains the differences between .ts and .tsx file extensions. .ts files are used for standard TypeScript code, while .tsx files include JSX syntax... canonical: https://daily.dev/posts/what-is-the-difference-between-a-ts-and-tsx-file-extension--jwoiqfz7k twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: What is the difference between a .ts and .tsx file extension? | daily.dev og:description: The post explains the differences between .ts and .tsx file extensions. .ts files are used for standard TypeScript code, while .tsx files include JSX syntax... og:url: https://daily.dev/posts/what-is-the-difference-between-a-ts-and-tsx-file-extension--jwoiqfz7k og:image: https://api.daily.dev/og/posts/jWOiqfZ7k.png og:image:alt: What is the difference between a .ts and .tsx file extension? og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # What is the difference between a .ts and .tsx file extension? **[LogRocket](https://daily.dev/sources/logrocket)** · 13 min read · 5 upvotes · 0 comments ## Summary The post explains the differences between .ts and .tsx file extensions. .ts files are used for standard TypeScript code, while .tsx files include JSX syntax and are used for React components. It includes code samples and best practices for using TypeScript with React to enhance development, type checking, and component structure. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- Tags: [#webdev](https://daily.dev/tags/webdev), [#react](https://daily.dev/tags/react), [#typescript](https://daily.dev/tags/typescript) [View this post on daily.dev](https://daily.dev/posts/what-is-the-difference-between-a-ts-and-tsx-file-extension--jwoiqfz7k) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"What is the difference between a .ts and .tsx file extension?","url":"https://daily.dev/posts/what-is-the-difference-between-a-ts-and-tsx-file-extension--jwoiqfz7k","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/what-is-the-difference-between-a-ts-and-tsx-file-extension--jwoiqfz7k"},"datePublished":"2025-03-27T21:50:07.082Z","dateModified":"2025-03-27T21:50:24.319Z","description":"The post explains the differences between .ts and .tsx file extensions. .ts files are used for standard TypeScript code, while .tsx files include JSX syntax...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/b8b300a9e983d48180dd49a60450e926?_a=AQAEuj9","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/b8b300a9e983d48180dd49a60450e926?_a=AQAEuj9","isAccessibleForFree":true,"articleSection":"LogRocket","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"LogRocket","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/logrocket","url":"https://daily.dev/sources/logrocket"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/what-is-the-difference-between-a-ts-and-tsx-file-extension--jwoiqfz7k","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,react,typescript","timeRequired":"PT13M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"LogRocket","item":"https://daily.dev/sources/logrocket"},{"@type":"ListItem","position":3,"name":"What is the difference between a .ts and .tsx file extension?"}]} ```