Category: TypeScript

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.

Sometimes, we want to parse JSON string in TypeScript.

In this article, we’ll look at how to parse JSON string in TypeScript.

How to parse JSON string in TypeScript?

To parse JSON string in TypeScript, we can call JSON.parse and assign a type to the variable that’s assigned to the parsed JSON object.

For instance, we write

interface MyObj {
  myString: string;
  myNumber: number;
}

const obj: MyObj = JSON.parse('{ "myString": "string", "myNumber": 4 }');

to call JSON.parse with '{ "myString": "string", "myNumber": 4 }' to return the object that’s parsed from the JSON string.

We then assign the returned object to the obj variable which has type MyObj.

In the MyObj interface, we list the properties that we expect to be in the parsed object along with their types.

Conclusion

To parse JSON string in TypeScript, we can call JSON.parse and assign a type to the variable that’s assigned to the parsed JSON object.

Sometimes, we want to get a variable type in TypeScript.

In this article, we’ll look at how to get a variable type in TypeScript.

How to get a variable type in TypeScript?

To get a variable type in TypeScript, we can use the typeof or instanceof operator.

For instance, we write

if (typeof abc === "number") {
  // ...
}

if (fooOrBar instanceof Foo) {
  // ...
}

to return the type of the abc variable with typeof abc.

And we use the instanceof operator to check if fooOrBar is created from the Foo constructor.

Conclusion

To get a variable type in TypeScript, we can use the typeof or instanceof operator.