Author: John Au-Yeung

Sometimes, we want to define static property in TypeScript interface.

In this article, we’ll look at how to define static property in TypeScript interface.

How to define static property in TypeScript interface?

To define static property in TypeScript interface, we should put the static property in a class instead.

For instance, we write

class RichDate {
  public static minValue = new Date();
}

to add the minValue static property to the RichDate class with the static keyword.

Then we can access the property by writing

RichDate.minValue 

Conclusion

To define static property in TypeScript interface, we should put the static property in a class instead.

Sometimes, we want to create a TypeScript static class.

In this article, we’ll look at how to create a TypeScript static class.

How to create a TypeScript static class?

To create a TypeScript static class, we can create an abstract class.

For instance, we write

export abstract class MyClass {
  public static myProp = "Hello";

  public static doSomething(): string {
    return "World";
  }
}

const x = MyClass.doSomething();

to create the MyClass abstract class with the abstract keyword.

In it, we add the doSomething method.

And we call it with MyClass.doSomething.

Conclusion

To create a TypeScript static class, we can create an abstract class.

Sometimes, we want to define an interface for an array of objects with TypeScript.

In this article, we’ll look at how to define an interface for an array of objects with TypeScript.

How to define an interface for an array of objects with TypeScript?

To define an interface for an array of objects with TypeScript, we can define the interface for each object.

For instance, we write

interface EnumServiceItem {
  id: number;
  label: string;
  key: any;
}

const result: EnumServiceItem[] = [
  { id: 0, label: "CId", key: "contentId" },
  { id: 1, label: "Modified By", key: "modifiedBy" },
  { id: 2, label: "Modified Date", key: "modified" },
];

to create the EnumServiceItem interface that has the id, label and key properties.

Then we set the result variable to the EnumServiceItem[] type.

And then we assign an array of objects that matches the structure described in EnumServiceItem to result result.

The properties listed and their types must all match to prevent any TypeScript compiler errors.

Conclusion

To define an interface for an array of objects with TypeScript, we can define the interface for each object.

Sometimes, we want to calculate the time between 2 Dates in TypeScript.

In this article, we’ll look at how to calculate the time between 2 Dates in TypeScript.

How to calculate the time between 2 Dates in TypeScript?

To calculate the time between 2 Dates in TypeScript, we can subtract the timestamps returned by the Date instances.

For instance, we write

const eventStartTime = new Date(event.startTime);
const eventEndTime = new Date(event.endTime);
const duration = eventEndTime.valueOf() - eventStartTime.valueOf();

to get the timestamps in milliseconds with valueOf.

Then we subtract them to get their differences in milliiseconds.

We create the dates with the Date constructor.

Conclusion

To calculate the time between 2 Dates in TypeScript, we can subtract the timestamps returned by the Date instances.

Sometimes, we want to set default property value in React component using TypeScript.

In this article, we’ll look at how to set default property value in React component using TypeScript.

How to set default property value in React component using TypeScript?

To set default property value in React component using TypeScript, we can put a type argument in the FunctionComponent type.

For instance, we write

interface PageProps {
  foo?: string;
  bar: number;
}

const PageComponent: FunctionComponent<PageProps> = (props) => {
  return (
    <span>
      Hello, {props.foo}, {props.bar}
    </span>
  );
};

PageComponent.defaultProps = {
  foo: "default",
};

to set the PageComponent component to the FunctionComponent<PageProps> type.

PageProps is an interface that has the optional foo property and the bar property.

And we set PageComponent.defaultProps to an object with the default value of foo set to 'default' which we need to do since we made foo optional in the PageProps interface.

Conclusion

To set default property value in React component using TypeScript, we can put a type argument in the FunctionComponent type.