articleschannelstagsspacestoolkit
LogRocket Blog

What is the difference between a .ts and .tsx file extension?

View Original
thumbnail

Table of Contents:

  1. TypeScript (.ts) Files
  2. Enumerations
  3. Classes
  4. Custom Hooks
  5. Handling Network Requests
  6. Creating Types and Interfaces
  7. TypeScript with JSX (.tsx) Files
  8. Passing Interfaces to Components
  9. Using Custom Hooks
  10. Best Practices
  11. Using Linters
  12. Using Utilities
  13. Using Generics
  14. Extending Component Props
  15. Project Structure

1. TypeScript (.ts) Files:

  • Purpose: Standard TypeScript code files
  • Use Cases: General TypeScript code (logic, data, utilities)
  • File Content: Pure TypeScript code (classes, interfaces, types)
  • Compilation: Compiled to .js files
  • Example: Type checking TypeScript code

2. Enumerations:

  • Define a set of named constants
  • Example: enum Direction { Up, Down, Left, Right }

3. Classes:

  • Blueprint for creating objects with properties and methods
  • Encapsulation, inheritance, polymorphism
  • Example: class Person { name: string; age: number; }

4. Custom Hooks:

  • Reusable functions for component logic
  • Example: 
    function useCustomHook() { /* logic here */ }

5. Handling Network Requests:

  • Utilize interfaces for API responses
  • Example: 
    interface User { id: number; name: string; }

6. Creating Types and Interfaces:

  • Define custom types with specific shapes
  • Use for type checking and readability
  • Example: type User = { id: number; name: string; }

7. TypeScript with JSX (.tsx) Files:

  • Purpose: TypeScript files that include JSX syntax
  • Use Cases: React components, any code needing JSX rendering
  • File Content: TypeScript code with embedded JSX elements
  • Compilation: Compiled to .js files after JSX transformation
  • React Usage: Essential for React component files

8. Passing Interfaces to Components:

  • Ensure prop types in React components
  • Example: 
    interface Props { name: string; age: number; }

9. Using Custom Hooks:

  • Incorporate custom hooks in React components
  • Reuse logic across different parts of the application
  • Example: Hook logic goes here

10. Best Practices:

  • Project Structure: Organize code into directories
  • Linter: Use linters for consistent code style
  • Generics: Implement generics for flexibility and type safety
  • Utilities: Create utility functions for common tasks

11. Using Linters:

  • Tools for maintaining code quality
  • Enforce coding standards and best practices
  • Example: ESLint, Prettier

12. Using Utilities:

  • Helper functions for common operations
  • Improve readability and maintainability
  • Example: formatDate(date: Date): string

13. Using Generics:

  • Parameterizing types for reusability
  • Ensures consistent data types throughout code
  • Example: function identity<T>(arg: T): T { return arg; }

14. Extending Component Props:

  • Enhance component flexibility and functionality
  • Utilize TypeScript to define prop interfaces
  • Example: interface Props extends React.HTMLProps<HTMLDivElement> {}

15. Project Structure:

  • Organize files based on functionality
  • Separate components, hooks, utilities, etc.
  • Maintain clear and scalable codebase structures

In this article, you've explored the differences between TypeScript (.ts) and TypeScript with JSX (.tsx) files, their use cases, and best practices for a React TypeScript project.