Type Guards in TypeScript
Photo by Spenser H on Unsplash

Type Guards in TypeScript

TypeScript is a statically typed language that allows you to define the types of variables, functions, and other entities in your code. However, at runtime, JavaScript is a dynamically typed language, meaning that the type of a value can change at any time. This can lead to bugs and errors in your code. To address this, TypeScript provides a feature called "type guards."

Type guards ?? are a way of checking the type of a value at runtime and narrowing its type in a conditional block. This allows you to write code that is more robust and less error-prone. There are three types of type guards in TypeScript: typeof, instanceof, and user-defined.

Typeof ???

You can use typeof to check for simple datatypes such as:

  • boolean
  • string
  • bigint
  • symbol
  • undefined
  • function
  • number

For anything outside of this list, the?typeof?type guard simply returns?"object".

No alt text provided for this image
Using typeof in TypeScript

In this example, the double function takes a parameter value that can be either a number or a string. Inside the function, we use the typeof type guard to check if value is a number. If it is, we multiply it by 2 and return the result. If it's not a number, then it must be a string, we concatenate it with itself and return the result.

Instanceof ???

The instanceof type guard allows you to check if an object is an instance of a specific class. The syntax for this is value instanceof type.

No alt text provided for this image
Since Employee is a subclass of Person, an instance of Employee is also an instance of Person.

In this example, it outputs true because Employee extends Person and inherits all of its properties and methods, including the constructor. When you create a new instance of Employee using new Employee('John', 'Sales'), it calls the constructor of Employee, which in turn calls the constructor of its parent class Person with the same arguments.

User-Defined ??

The third type of type guard in TypeScript is the user-defined type guard. This allows you to define your own custom type guard functions that check if a value is of a certain type. The syntax for this is value is type.

No alt text provided for this image
How to write your own type guard. ???

The code above defines a type guard function called isMyObject, which takes an unknown value and returns a boolean indicating whether or not the value is of type MyObject. In this case, the implementation of the type guard is not really doing any checking and simply returns true. However, in real-world code, the implementation of the type guard would typically include some actual type checking.

The code then declares a variable instance with an initial value of 10, which is of type unknown. The variable is then reassigned to a new instance of MyObject with x value of 10 and y value of 20.

Next, the code uses the isMyObject type guard to check if instance is of type MyObject. If the type guard returns true, the code calls the myMethod() method on the instance object, which will return 30. Otherwise, if the type guard returns false, the code attempts to call myMethod() on the instance object again, which will throw a runtime error because myMethod() is not a function on instance when it is not of type MyObject.

要查看或添加评论,请登录

社区洞察

其他会员也浏览了