Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Full-Stack React, TypeScript, and Node
  • Table Of Contents Toc
Full-Stack React, TypeScript, and Node

Full-Stack React, TypeScript, and Node - Second Edition

By : David Choi, Cihan Yakar
close
close
Full-Stack React, TypeScript, and Node

Full-Stack React, TypeScript, and Node

By: David Choi, Cihan Yakar

Overview of this book

In the fast-paced world of web development, React is a widely used library for building applications, while Node.js and Express support scalable server-side solutions and web services. TypeScript enhances JavaScript projects with robustness and maintainability, making it an essential tool for large-scale applications. This edition provides a hands-on guide to mastering these technologies, with new chapters and updated content that reflects current industry practices. Begin with a solid foundation in TypeScript to build high-quality web applications. Explore React 19, leveraging the Hooks API and Redux Toolkit for state management. Then transition to server-side development with Express, incorporating modern practices like JWT-based authentication and Prisma ORM for database management. A major focus of this edition is production readiness. Learn how to containerize your application with Docker and Podman, automate builds and tests with GitHub Actions, and deploy to the cloud. New chapters add monitoring and observability with OpenTelemetry and Grafana plus a hands-on guide to AI-assisted development with LLM coding agents. Other updates include Vitest for testing and expanded content on Postgres and Prisma ORM. By the end of this book, you will have built and deployed a comprehensive full-stack application, ready for production.
Table of Contents (19 chapters)
close
close
17
Other Books You May Enjoy
18
Index

Understanding polymorphism

Polymorphism is a bit of an intimidating name (it comes from Greek: poly = many, morph = form), but it's actually quite powerful because it allows us to write code that works with a general type and lets the specific implementation vary at runtime, all while maintaining type safety. The key idea is that the caller doesn't need to know which concrete type it is working with.

Let's look at some code and see how this works. Create a file called polymorphism.ts and add the following code. This is going to be a fair bit of code, so let's go through it in pieces:

interface Animal {
  name: string;
  runMaxMiles(hours: number): number;
}

First, we've created an interface that shows an Animal type. This type has a name and a method signature of runMaxMiles. Obviously, since this is an interface, our intention is to implement this interface with specific capabilities, so let's do that now:

class Wolf implements Animal {
  name: string = "";
  runMaxMiles(hours: number): number {
    return hours * 45;
  }
}

class Cheetah implements Animal {
  name: string = "";
  runMaxMiles(hours: number): number {
    return hours * 75;
  }
}

Here, we've created two distinct implementations: Wolf and Cheetah. Each one has a certain distance it can cover within a given time period—in other words, miles per hour. Let's continue by adding the portion of our code that uses our Animal interface polymorphically. The function below selects an animal based on the duration, then calls runMaxMiles through the Animal interface without caring which concrete class is behind it:

const hours = 0.5;
function pickTheBestAnimalToRun(hours: number): number {
  let animal: Animal | undefined;
  if (hours >= 0.5) {
    animal = new Wolf();
    animal.name = "wolfie";
  } else {
    animal = new Cheetah();
    animal.name = "cheetos";
  }

  if (animal instanceof Wolf) {
    console.log("This is a wolf");
  }
  if (animal instanceof Cheetah) {
    console.log("This is a cheetah");
  }
  return animal.runMaxMiles(hours);
}

pickTheBestAnimalToRun(hours);

So, what have we done in our pickTheBestAnimalToRun function? First, we created an animal variable of the Animal type. Then, based on the hours needed, we select either a Wolf or a Cheetah. This selection part is really a factory pattern: picking which concrete class to create. The actual polymorphism happens at the bottom: animal.runMaxMiles(hours) works correctly regardless of whether animal is a Wolf or a Cheetah, because both conform to the Animal interface. If we later added a third class, say Horse implements Animal, this same line would work unchanged. That is the essence of polymorphism: existing code stays closed to modification but open to extension.

The example also includes instanceof checks that print which concrete type was selected. These are here just for demonstration logging; in real code, heavy use of instanceof to branch on concrete types is actually the opposite of polymorphism and usually means the interface should be doing the work instead:

Figure 2.15 – The polymorphism result

Figure 2.15 – The polymorphism result

As you can see, our code runs and the pickTheBestAnimalToRun function selects the wolf since our hours value was 0.5. The important takeaway is that the call to runMaxMiles worked through the Animal interface without the caller needing to know it was specifically a Wolf.

Note that TypeScript's structural typing, which we covered earlier, means that polymorphism here works by shape, not by name. A class with the right name and runMaxMiles members would be compatible with Animal even without writing implements Animal;. The implements keyword just makes the compiler verify the shape for you at the point of declaration.

Next, let's learn about generics, which provide another form of polymorphism called parametric polymorphism, where a type itself becomes a parameter.

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Full-Stack React, TypeScript, and Node
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon