Author: John Au-Yeung

Sometimes, we want to use enum as interface key in TypeScript.

In this article, we’ll look at how to use enum as interface key in TypeScript.

How to use enum as interface key in TypeScript?

To use enum as interface key in TypeScript, we can use the in operator.

For instance, we write

enum ColorsEnum {
  red,
  blue,
  green,
}

interface ColorsInterface {
  [key in ColorsEnum ]: boolean;
}

const example: ColorsInterface = {
  [ColorsEnum.red]: true,
  [ColorsEnum.blue]: false,
  [ColorsEnum.green]: true,
};

to define the ColorsInterface inteface that has [key in colorsEnum] has the keys, which restricts the key values to the ones in ColorsEnum.

Then we define the example object which use the enum values as keys.

Conclusion

To use enum as interface key in TypeScript, we can use the in operator.

Sometimes, we want to fix the "Element implicitly has an ‘any’ type because type ‘Window’ has no index signature?" error in TypeScript.

In this article, we’ll look at how to fix the "Element implicitly has an ‘any’ type because type ‘Window’ has no index signature?" error in TypeScript.

How to fix the "Element implicitly has an ‘any’ type because type ‘Window’ has no index signature?" error in TypeScript?

To fix the "Element implicitly has an ‘any’ type because type ‘Window’ has no index signature?" error in TypeScript, we can add dynamic properties into the Window interface.

For instance, we write

interface Window {
  [key: string]: any;
}

to add the

[key: string]: any;

index signature so that we can add and use any property in window without compiler errors.

Conclusion

To fix the "Element implicitly has an ‘any’ type because type ‘Window’ has no index signature?" error in TypeScript, we can add dynamic properties into the Window interface.

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.