Category: TypeScript

Sometimes, we want to use generics in props in React in a functional component.

In this article, we’ll look at how to use generics in props in React in a functional component.

How to use generics in props in React in a functional component?

To use generics in props in React in a functional component, we can create an interface that takes a generic type and use that as the prop type.

For instance, we write

interface IProps<T> {
  collapsed: boolean;
  listOfData: T[];
  displayData: (data: T, index: number) => React.ReactNode;
}

const CollapsableDataList: React.FunctionComponent<IProps<T>> = (props) => {
  /*...*/
};

to define the IProps<T> type and use T as a type for listOfData and the data parameter of displayData.

Then we use that as the prop type with React.FunctionComponent<IProps<T>> where T is any type that we have already defined.

Conclusion

To use generics in props in React in a functional component, we can create an interface that takes a generic type and use that as the prop type.

Sometimes, we want to check if two dates are in the same day or in the same hour with TypeScript.

In this article, we’ll look at how to check if two dates are in the same day or in the same hour with TypeScript.

How to check if two dates are in the same day or in the same hour with TypeScript?

To check if two dates are in the same day or in the same hour with TypeScript, we can check if their year, month, and date are equal.

For instance, we write

const sameDay = (d1, d2) => {
  return (
    d1.getFullYear() === d2.getFullYear() &&
    d1.getMonth() === d2.getMonth() &&
    d1.getDate() === d2.getDate()
  );
};

to create the sameDay function that gets the year of each date with getFullYear.

getMonth gets the month, and getDate gets the date of the month.

Then we compare all 3 and join them with && to check if both dates have the same year, month, and date.

Conclusion

To check if two dates are in the same day or in the same hour with TypeScript, we can check if their year, month, and date are equal.

Sometimes, we want to get enum keys as a union string type in TypeScript.

In this article, we’ll look at how to get enum keys as a union string type in TypeScript.

How to get enum keys as a union string type in TypeScript?

To get enum keys as a union string type in TypeScript, we can use the keyof operator.

For instance, we write

enum MyEnum {
  A,
  B,
  C,
}

type enumValues = keyof typeof MyEnum;

to create the MyEnum enum.

And then we create the enumValues type with keyof typeof MyEnum; which returns the union type with the keys of MyEnum as the values.

So a variable with type enumValues can have value 'A', 'B' or 'C'.

Conclusion

To get enum keys as a union string type in TypeScript, we can use the keyof operator.

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.