Category: TypeScript

Sometimes, we want to get the return type of the setInterval function with TypeScript.

In this article, we’ll look at how to get the return type of the setInterval function with TypeScript.

How to get the return type of the setInterval function with TypeScript?

To get the return type of the setInterval function with TypeScript, we can use the ReturnType type.

For instance, we write

const t: ReturnType<typeof setInterval> = setInterval(() => {
  //...
});

to set t to the ReturnType<typeof setInterval> type.

typeof setInterval will make the TypeScript compiler automatically detect the type of setInterval.

And using ReturnType on that will make it automatically deduce its return type.

Conclusion

To get the return type of the setInterval function with TypeScript, we can use the ReturnType type.

Sometimes, we want to cast a custom type to a primitive type in TypeScript.

In this article, we’ll look at how to cast a custom type to a primitive type in TypeScript.

How to cast a custom type to a primitive type in TypeScript?

To cast a custom type to a primitive type in TypeScript, we can assign our value to a variable with the type we want.

For instance, we write

type Rating = 0 | 1 | 2 | 3 | 4 | 5;
const myRating: Rating = 4;
const rate: number = myRating;

to assign myRating to the rate variable which is a number.

Then we can use rate as a number without errors.

Conclusion

To cast a custom type to a primitive type in TypeScript, we can assign our value to a variable with the type we want.

Sometimes, we want to fix the ‘Type ‘string’ is not assignable to type ‘"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"” with React and TypeScript.

In this article, we’ll look at how to fix the ‘Type ‘string’ is not assignable to type ‘"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"” with React and TypeScript.

How to fix the ‘Type ‘string’ is not assignable to type ‘"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"” with React and TypeScript?

To fix the ‘Type ‘string’ is not assignable to type ‘"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"” with React and TypeScript, we can cast the style object to type React.CSSProperties.

For instance, we write

const myStyles = {
  position: "absolute",
} as React.CSSProperties;

in our component so that the TypeScript compiler knows that the myStyles object is of type React.CSSProperties, which allows the position property to have value 'absolute'.

Conclusion

To fix the ‘Type ‘string’ is not assignable to type ‘"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"” with React and TypeScript, we can cast the style object to type React.CSSProperties.

Sometimes, we want to create an object index key type in TypeScript.

In this article, we’ll look at how to create an object index key type in TypeScript.

How to create an object index key type in TypeScript?

To create an object index key type in TypeScript, we can use index signatures.

For instance, we write

interface IDictionary<TValue> {
  [id: string]: TValue;
}

class Test {
  private dictionary: IDictionary<string>;
  //...
}

to create the IDictionary interface that takes the TValue generic type.

Then we can use it as the type for the dictionary variable in the Test class.

As a result, dictionary should be assigned an object with all string property values.

Conclusion

To create an object index key type in TypeScript, we can use index signatures.

Sometimes, we want to add types for rest props in React and TypeScript.

In this article, we’ll look at how to add types for rest props in React and TypeScript.

How to add types for rest props in React and TypeScript?

To add types for rest props in React and TypeScript, we can add an index signature into the prop’s type.

For instance, we write

type Props = {
  id: number;
  name: string;
  [x: string]: any;
};

const MyComponent: React.FC<Props> = (props) => {
  //...
};

to add the Props type that has the

[x: string]: any;

index signature that lets us allow any property in props.

Then we can access any property in addition to id and name without errors.

Conclusion

To add types for rest props in React and TypeScript, we can add an index signature into the prop’s type.