Category: TypeScript

Sometimes, we want to add a class type check in TypeScript.

In this article, we’ll look at how to add a class type check in TypeScript.

How to add a class type check in TypeScript?

To add a class type check in TypeScript, we can create a function to do the check.

For instance, we write

const isFish = (pet: Fish | Bird): pet is Fish => {
  return (<Fish>pet).swim !== undefined;
};

if (isFish(pet)) {
  pet.swim();
} else {
  pet.fly();
}

to create the isFish function that returns the pet is Fish type.

And we check if pet is a Fish by checking if the swim property isn’t undefined.

Then we call isFish with pet to check if pet is a Fish.

And then we call swim if it is a Fish.

Conclusion

To add a class type check in TypeScript, we can create a function to do the check.

Sometimes, we want to fix the "error TS2533: Object is possibly ‘null’ or ‘undefined’" error with TypeScript.

In this article, we’ll look at how to fix the "error TS2533: Object is possibly ‘null’ or ‘undefined’" error with TypeScript.

How to fix the "error TS2533: Object is possibly ‘null’ or ‘undefined’" error with TypeScript?

To fix the "error TS2533: Object is possibly ‘null’ or ‘undefined’" error with TypeScript, we can use the optional chaining operator.

For instance, we write

refToElement?.current?.focus();

to use the optional chaining ?. to get the value of the refToElement.current.focus method.

?. will return undefined if any of the properties in the chain are null or undefined instead of throwing an error.

Conclusion

To fix the "error TS2533: Object is possibly ‘null’ or ‘undefined’" error with TypeScript, we can use the optional chaining operator.

Sometimes, we want to get an object’s class name at runtime with TypeScript.

In this article, we’ll look at how to get an object’s class name at runtime with TypeScript.

How to get an object’s class name at runtime with TypeScript?

To get an object’s class name at runtime with TypeScript, we canm use the name property of the constructor or class.

For instance, we write

class MyClass {}

const x = new MyClass();

console.log(x.constructor.name);
console.log(MyClass.name);

to get the name property from a MyClass instance with x.constructor.name.

Likewise, we get the class name from the static MyClass.name property.

They should both return 'MyClass'.

Conclusion

To get an object’s class name at runtime with TypeScript, we canm use the name property of the constructor or class.

To extend types in TypeScript, we can use the extends keyword.

For instance, we write

type Event = {
  name: string;
  dateCreated: string;
  type: string;
};

interface UserEvent extends Event {
  UserId: string;
}

to create the UserEvent interface that extends the Event type.

We extend it by adding the string UserId field in UserEvent and inheriting the rest from Event.

Conclusion

To extend types in TypeScript, we can use the extends keyword.

Sometimes, we want to pass optional parameters while omitting some other optional parameters with TypeScript.

In this article, we’ll look at how to pass optional parameters while omitting some other optional parameters with TypeScript.

How to pass optional parameters while omitting some other optional parameters with TypeScript?

To pass optional parameters while omitting some other optional parameters with TypeScript, we can add ? after the optional parameter mames.

For instance, we write

export interface INotificationService {
  error(message: string, title?: string, autoHideAfter?: number);
}

class X {
  error(message: string, title?: string, autoHideAfter?: number) {
    console.log(message, title, autoHideAfter);
  }
}

new X().error("hi there", undefined, 1000);

to make the title and autoHideAfter parameters optional in the error method in the INotificationService.

Likewise, we add ? to the parameter names in the error method in the X class to make those fields optional.

Conclusion

To pass optional parameters while omitting some other optional parameters with TypeScript, we can add ? after the optional parameter mames.