TypeScript

When working with the FormData interface in JavaScript, where data is appended as key/value pairs, there’s no built-in way to enforce type safety on the keys you append. This can lead to typos, missing keys, and unexpected runtime errors. But in TypeScript, we can solve this by enforcing strict key validation. I needed this solution myself when sending my form values to an API. I later realized that I had made several typographical errors in more than one key/value pair…

When you model entities with TypeScript, it is very common to get an interface like this: TypeScript   interface User { id: number username: string … } ​ interface Order { id: number userId: number title: string year: number month: number day: number amount: { currency: ‘EUR’ | ‘USD’, value: number } … } The Problem The properties’ types have no semantic meaning. In terms of types, User.id, Order.id, Order.year, etc. are the same: a number, and as a number…

In web apps it’s a common requirement to tailor an element’s appearance based on a condition. There are a few ways of accomplishing this, but if you’re working with Angular, your choice is clear. The ngClass directive provides a myriad of ways to dynamically assign class names to elements or components. Its syntax is both concise and yet supports fairly complex logic to provide us with fine-grained control over both our class names as well as the criteria for setting…

In this article, I will guide you through the process of creating a serverless GraphQL API using TypeScript, AWS Lambda, and Apollo Server.  Serverless Computing Serverless computing is a cloud-computing execution model where cloud providers automatically manage the infrastructure for running applications. In this model, developers write code, and the cloud provider takes care of running, scaling, and maintaining the servers, meaning developers don’t need to worry about server management, infrastructure provisioning, or scaling. The term “serverless” doesn’t mean that…

Type predicates are an interesting syntactical feature in TypeScript. While they appear in the same place as return type annotations, they look more like short affirmative sentences than typical annotations. This gives you greater control over type checking. With the release of TypeScript 5.5, working with type predicates has become more intuitive now because it can infer them automatically in many cases. But if you’re navigating slightly older code-bases, you’re likely to encounter handwritten type predicates more often. In this…

TypeScript can make your life easier as a programmer and make your code less error-prone. We just posted a TypeScript course for beginners on the freeCodeCamp.org YouTube channel. Bob Ziroll from Scrimba teaches this course. Interactive code is available on the Scrimba course page for each lesson. The course will give you a hands-on introduction to TypeScript. By the end, you’ll have a solid understanding of the fundamentals of TypeScript and how to leverage it to create safer and more…

In our post about extensive-react-boilerplate updates, we mentioned that we migrated e2e-testing from Cypress to Playwright. Now, let’s delve a little deeper into this change. At the time of writing the automated tests, we had a small amount of functionality to cover and didn’t face significant limitations when using Cypress. Yet, we decided to turn our attention to Playwright for several reasons. We wanted to explore the framework created by Microsoft and understand why it is gaining popularity. Additionally, similar…

Automated testing of web applications often requires interaction with external APIs. However, relying on actual API responses can introduce variables beyond your control, such as network issues or server downtime. This is where API mocking comes in. Mocking allows you to simulate API responses, making your tests more reliable and faster. In this article, we’ll explore how to mock APIs using Playwright with TypeScript. Mocking APIs in Playwright Playwright provides a way to intercept network requests and mock responses using…

As React Native applications evolve, the need for efficient state management becomes increasingly evident. While Async Storage serves its purpose for local data persistence, transitioning to the Context API with TypeScript brings forth a more organized and scalable approach. This comprehensive guide will walk you through the migration process step by step, leveraging the power of TypeScript. Understanding Async Storage and Context API Async Storage in React Native offers asynchronous, persistent storage for key-value data on the device. As the…