Unleashing the Power of Duck-Typing in React: Crafting a Generic Application by David Villamarin

For React developers, the typical practice when creating React applications involves generating components, pages, and routes for various features required by the application. This process can become laborious, dedicating extensive hours to fine-tuning the implementation details. However, what if you are uncertain about the components your page application will encompass? One might assume that such an application cannot be developed. Fear not! We all have heard "If it walks like a duck and it quacks like a duck, then it must be a duck". It is called "duck typing" a TypeScript’s core principle: type checking focuses on the shape that values have. This powerful concept is used to determine whether an object can be used for a particular purpose, which means that if an object behaves like a certain type, then it can be treated as that type. The idea is to describe duck typing, using TS examples, checking why duck typing is important, and we'll check together when and when not to use it. How can we apply this concept to a react application? Duck typing offers a powerful and flexible way of working with objects, eliminating concerns about their specific internal content. Once we've established duck-typing functions for all our application components, such as inputs, checkboxes, buttons, lists, modals, and custom components, we can channel them through a component switchyard. The outcome of this process is then rendered to the UI as a page. But why should React developers specifically embrace duck typing in TypeScript? Duck typing provides a way to achieve type safety by allowing us to define and validate the expected shapes of our components. This ensures that only compatible components are used together, reducing the likelihood of runtime errors and enhancing the robustness of our applications. With clearly defined types, refactoring becomes a smooth process, and the compiler assists in catching potential issues early in the development phase, contributing to a more maintainable codebase. In this talk, you will learn about duck typing in TypeScript, focusing on a React application. Following this pattern makes it possible to build generic applications that serve an unlimited number of pages. Table of contents 1. What and Why Duck-typing? - General description - Advantages / Disadvantages - Examples 2. Overview of a generic React application written in TS - Routing