TypeScript

A collection of 26 posts

TypeScript with ReactJS ?

In this article, you'll learn all you require to know to begin using TypeScript and React, and more critically we'll discuss why or why you should not utilize this. There's a decent case to be made for both sides of that argument.

How to - parse JSON strings in TypeScript

In this article, we discuss various techniques for parsing JSON strings in TypeScript, such as using the built-in JSON.parse() method, type assertions, custom JSON parsers, error handling, and reviver functions.

How to - override interface properties in TypeScript

In this article, we explore various techniques for overriding properties in TypeScript interfaces, such as extending interfaces, using intersection types, and leveraging generics and mapped types.

Mastering the QuerySelector in TypeScript: A Comprehensive Guide with Code

In this article, we cover various techniques for using QuerySelector in TypeScript, such as basic usage, type assertions, custom utility functions, and error handling.

How to - Handle Process Environment Variables in TypeScript: A Comprehensive Guide with Code

In this article, we cover various techniques for handling process environment variables in TypeScript, such as using type assertions, creating typed configuration objects, using type guards, and leveraging configuration libraries like dotenv and dotenv-safe.

How to - use dynamic keys with TypeScript objects

By using index signatures, the Record utility type, mapped types, and nested types, you can define and manipulate objects with dynamic keys efficiently and safely.

How to - Remove properties from TypeScript objects

In this blog post, we explored various techniques to remove properties from TypeScript objects, such as using the delete operator, object destructuring, creating utility functions, and leveraging the Omit type.

Solved - object is possibly null or undefined in TypeScript

The error "Object is possibly null." occurs when TypeScript's type checker determines that a variable could be null or undefined.

Solved - Type 'unknown' is not assignable to type 'x' in TypeScript

The type "unknown" is implicitly assigned by the TypeScript for values whose type is not known to TypeScript. The mentioned error occurs when a value of type "unknown" is assigned to a value of a different type.

Solved -Using forEach loop with Promise or async function not working in JavaScript/TypeScript

Using an async-await call in an asynchronous function inside a forEach method would not work in JavaScript / TypeScript. Instead, use a for loop method to get the intended result.

How to access the keys and values of an Enum (string and numeric) in TypeScript.

In TypeScript, "enums" are real objects that exist at the runtime. We can use a combination of different techniques with "Object.keys()" and "Object.values()" method to access the values.

How to use index signature, {[key: string]: any} type in TypeScript

The index signature is used to type an object whose exact shape, type or property names are unknown to us. We can configure the index signature in multiple ways to make it as specific as possible.

Solved - Type 'x' is not assignable to type 'never' using TypeScript in React

This error occurs when you have not explicitly given a type to a value. Resulting in the implicit assignment of the type "never" to the value. The "never" type always expects the value to the empty and throws an error when its not empty.

Solved - Type x is missing the following properties from type y using TypeScript in React

This error occurs when you are not passing all the required props or only passing some of the required props to the component. Pass all the props or define the typing of the component accordingly to handle this error.

How to validate an Ant Design Form.List to limit the max number of fields.

In order to limit the number of maximum fields allowed inside the Form.List component, we need to create a custom validator inside the "rules" prop specifying the conditions and the error message.

How to create an Ant Design Form.List with a minimum number of n fields by default

In Ant Design, we can create a minimum number of default fields inside the "Form.List" using the initialValue prop passed to the "Form" component

Solved - Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.

When we pass in children to a component which does not take in any props, TypeScript will throw the following error. Fix it by defining the props, assigning types or by removing the children.

Solved - "Element implicitly has an 'any' type because expression of type 'x' can't be used to index type" in React

The error occurs when we try to access a property of an object without a type definition.

Solved - Property 'x' is missing in type 'y' but required in type 'z'.

This error occurs when you are not passing all the required props defined in the typing of the component. You can either pass the props or make it optional or assign default values to solve this problem.

Solved - Property 'children' does not exist on type 'y' in React

The "children does not exist on type" error occurs when we are not passing the children type to the component in use.

How to add types to the useRef Hook while using TypeScript in React

Understand how to type a useRef based on the possible values that could be assigned to it and also make sure to conditionally call methods originating from the useRef itself to avoid null errors.

Solved - Property 'X' does not exist on type 'Readonly<{}>' in React

This error occurs when we access a prop or state property that we have not explicitly given a type inside the React class component.

Solved - Argument of type "x" is not assignable to parameter of type 'never'.

"Argument of type "x" is not assignable to parameter of type 'never'" means that you forgot to explicitly mention the type of a value and got implicitly assigned a 'never' type.

React 18 - The root index.ts file in a TypeScript project

The boilerplate code for React 18 project's index.ts file written in TypeScript.

How to find the "type" of an event in ReactJS using TypeScript?

Hovering on any React element will show its type definition, which you can pass as "type" to any custom handler function This article demonstrates multiple examples of typing of events.

Solved - Binding element x implicitly has an 'any' type in TypeScript

This error occurs when the types are not defined for the passed props in a React function. While using TypeScript, we need to define the type of props that will be passed down the function.