All Typescript posts
Build a Tic-Tac-Toe Game with TypeScript, React and Minimax
Updated on · 12 min read|In this tutorial, we will build a Tic-Tac-Toe game with TypeScript, React, React Hooks, and style it using the Styled Components library. Additionally, we'll use the Minimax algorithm to power the AI moves. The final code is available on both GitHub and CodeSandbox.
Form Validation with React Hook Form
Updated on · 6 min read|Form validation is the process of checking the entered data against specific criteria before it is processed. This can include checking that a required field has been filled out, that an email address is in the correct format, or that a password meets specific complexity requirements. Among the numerous tools and libraries available for form validation in React, React Hook Form stands out as a robust, easy-to-use solution.
Drag-and-Drop File Upload Component with React and TypeScript
Updated on · 4 min read|In this tutorial we'll walk through the steps required to build such a component in React, using TypeScript for additional type safety and robustness. The unique aspect of our approach is that we won't rely on any external libraries, giving you the fundamental knowledge and freedom to create and customize a file upload solution that fits your specific needs.
TypeScript Template Literal Types: Practical Use-Cases for Improved Code Quality
Updated on · 5 min read|Explore practical use-cases of TypeScript template literal types to enhance code safety and maintainability. Learn to leverage advanced type features for more expressive, robust, and easy-to-manage applications.
Understanding and Implementing Type Guards In TypeScript
Updated on · 8 min read|Type guards are a powerful feature in TypeScript that allows you to narrow down the type of an object within a certain scope. With type guards, you can perform specific checks to determine the type of an object and then use that object in a way that is type-safe according to the TypeScript compiler. In this post, we'll look into the concept of type guards, explore the different types of type guards that TypeScript offers, and learn how to use them in practical scenarios.
Mocking the Window Object In Jest Tests
Updated on · 6 min read|In this article, we'll explore the best practices for mocking the window object in Jest, using a simple function that retrieves a language code from a page URL as an example.
Typing React Context In TypeScript
Updated on · 5 min read|In this article, we'll see how to type React context in TypeScript. We explore the process of creating a theme context supporting dark and light themes, addressing type-related challenges along the way.
What Is NaN: A Deeper Dive Into JavaScript's Implementation of the IEEE-754 Floating Point Standard
Updated on · 6 min read|NaN, or "Not a Number", is a special value in JavaScript and TypeScript (as well as many other programming languages) that represents an undefined or unrepresentable value resulting from an arithmetic operation. It is often used as a placeholder for a missing numerical value or as a way to signify an error. However, what is the type of NaN in JavaScript?
Productivity Benefits of Integrating ChatGPT Into the Front-End Development Process
Updated on · 8 min read|Boost your web development productivity with ChatGPT. Learn how to leverage its features for code generation, debugging, optimization, and more in TypeScript and JavaScript projects.
Simplifying Connected Props with Redux and TypeScript
Updated on · 4 min read|Learn how to simplify connected props with Redux and TypeScript by using the ConnectedProps helper type. In this article, we'll walk through a concrete example and show you how to automatically infer the types of connected props from mapStateToProps and mapDispatchToProps. This will help you avoid manual type declaration and improve the maintainability of your app.
TypeScript: Typing Form Events In React
Updated on · 9 min read|Handling events in React is very close to how the events on DOM elements are handled. The biggest difference is, however, that React wraps the native DOM events into SyntheticEvent, making them behave slightly differently than the native events. Consequently, typing form events in React is not the same as native events. In this post, we'll see how to type form events in React on the example of a simple component as well as discuss the most common pitfalls.
TypeScript: Typing React UseRef Hook
Updated on · 5 min read|Discover how to effectively type the useRef hook in TypeScript for React applications that require imperative DOM manipulation. Learn best practices, common pitfalls, and practical examples, such as controlling the focus state of an input element.