Advanced TypeScript for React

Welcome to the "Advanced TypeScript for React: Deep Diving into Typing Techniques and Best Practices" workshop! This intensive 3-hour session is designed for developers looking to elevate their TypeScript and React skills. Through hands-on exercises and in-depth discussions , you'll explore advanced typing techniques, component patterns, and best practices to enhance your React applications with TypeScript.

Workshop Objectives

• Deepen your understanding of advanced TypeScript features and their application in React projects.
• Explore typing techniques such as discriminated union props, generic components, and forwardRef typing.
• Dive into advanced component patterns, including compound and polymorphic components.
• Uncover miscellaneous TypeScript tips and best practices to streamline your development process.

Folder Structure

The workshop materials are organized within a Next.js app, adhering to the following structure:

• /exercises: Contains all exercise files, including one warm-up and four main exercises, each focusing on a specific aspect of advanced TypeScript in React.

Workshop Structure & Highlights

• Introductory Remarks: An overview of the workshop's goals and a TypeScript and React basics refresher.
• Warm-up Exercise: A practical start with enhancing components using standard HTML attribute types.
• Session 1: Discriminated Union Props: Understanding string literal and discriminated union props.
• Session 2: Compound & Polymorphic Components: Delving into the flexibility of compound and polymorphic components.
• Session 3: Generic Components: Mastering the creation of generic components for reusable code patterns.
• Session 4: Typing Components wrapped in forwardRef: Techniques for typing components wrapped with forwardRef.
• Session 5: Miscellaneous TypeScript Tips for React: A roundup of useful TypeScript tips for React development.
• Closing Remarks: Summarizing the workshop's key takeaways and encouraging continued exploration.

Getting Started

Ready to jump in? Here's how to get set up:

To kick off your advanced TypeScript journey, follow these steps:

• Clone the Repository:

git clone https://github.com/glennreyes/advanced-typescript-workshop

• Install Dependencies:

cd advanced-typescript-workshop
pnpm install

• Start the Development Server:

pnpm dev

• Open Your Browser and navigate to http://localhost:3000 to start exploring the exercises!

Feel free to reach out if you encounter any setup issues or have questions about the exercises. Happy coding!

Additional Notes

This workshop is interactive and hands-on, emphasizing practical application and problem-solving. We encourage questions, discussions, and feedback throughout the session. Access to a GitHub repository with starter code and solutions will be provided.

Join us in this advanced workshop to refine your TypeScript skills and take your React projects to the next level!

Slides

https://speakerdeck.com/glennreyes/advanced-typescript-for-react