Type Guard

Type Guards allow you to narrow down the type of an object within a conditional block.

typeof

TypeScript is aware of the usage of the JavaScript instanceof and typeof operators. If you use these in a conditional block, TypeScript will understand the type of the variable to be different within that conditional block. Here is a quick example where TypeScript realizes that a particular function does not exist on string and points out what was probably a user typo:

  1. function doSomething(x: number | string) {
  2.     if (typeof x === 'string') { // Within the block TypeScript knows that `x` must be a string
  3.         console.log(x.subtr(1)); // Error, 'subtr' does not exist on `string`
  4.         console.log(x.substr(1)); // OK
  5.     }
  6.     x.substr(1); // Error: There is no guarantee that `x` is a `string`
  7. }

instanceof

Here is an example with a class and instanceof:

  1. class Foo {
  2.     foo = 123;
  3.     common = '123';
  4. }
  6. class Bar {
  7.     bar = 123;
  8.     common = '123';
  9. }
  11. function doStuff(arg: Foo | Bar) {
  12.     if (arg instanceof Foo) {
  13.         console.log(arg.foo); // OK
  14.         console.log(arg.bar); // Error!
  15.     }
  16.     if (arg instanceof Bar) {
  17.         console.log(arg.foo); // Error!
  18.         console.log(arg.bar); // OK
  19.     }
  21.     console.log(arg.common); // OK
  22.     console.log(arg.foo); // Error!
  23.     console.log(arg.bar); // Error!
  24. }
  26. doStuff(new Foo());
  27. doStuff(new Bar());

TypeScript even understands else so when an if narrows out one type it knows that within the else it’s definitely not that type. Here is an example:

  1. class Foo {
  2.     foo = 123;
  3. }
  5. class Bar {
  6.     bar = 123;
  7. }
  9. function doStuff(arg: Foo | Bar) {
  10.     if (arg instanceof Foo) {
  11.         console.log(arg.foo); // OK
  12.         console.log(arg.bar); // Error!
  13.     }
  14.     else {  // MUST BE Bar!
  15.         console.log(arg.foo); // Error!
  16.         console.log(arg.bar); // OK
  17.     }
  18. }
  20. doStuff(new Foo());
  21. doStuff(new Bar());

in

The in operator does a safe check for the existance of a property on an object and can be used as a type guard. E.g. 

  1. interface A {
  2.   x: number;
  3. }
  4. interface B {
  5.   y: string;
  6. }
  8. function doStuff(q: A | B) {
  9.   if ('x' in q) {
  10.     // q: A
  11.   }
  12.   else {
  13.     // q: B
  14.   }
  15. }

Literal Type Guard

When you have literal types in a union you can check them to discriminate e.g. 

  1. type Foo = {
  2.   kind: 'foo', // Literal type 
  3.   foo: number
  4. }
  5. type Bar = {
  6.   kind: 'bar', // Literal type 
  7.   bar: number
  8. }
  10. function doStuff(arg: Foo | Bar) {
  11.     if (arg.kind === 'foo') {
  12.         console.log(arg.foo); // OK
  13.         console.log(arg.bar); // Error!
  14.     }
  15.     else {  // MUST BE Bar!
  16.         console.log(arg.foo); // Error!
  17.         console.log(arg.bar); // OK
  18.     }
  19. }

User Defined Type Guards

JavaScript doesn’t have very rich runtime introspection support built in. When you are using just plain JavaScript Objects (using structural typing to your advantage), you do not even have access to instanceof or typeof. For these cases you can create User Defined Type Guard functions. These are just functions that return someArgumentName is SomeType. Here is an example:

  1. /**
  2.  * Just some interfaces
  3.  */
  4. interface Foo {
  5.     foo: number;
  6.     common: string;
  7. }
  9. interface Bar {
  10.     bar: number;
  11.     common: string;
  12. }
  14. /**
  15.  * User Defined Type Guard!
  16.  */
  17. function isFoo(arg: any): arg is Foo {
  18.     return arg.foo !== undefined;
  19. }
  21. /**
  22.  * Sample usage of the User Defined Type Guard
  23.  */
  24. function doStuff(arg: Foo | Bar) {
  25.     if (isFoo(arg)) {
  26.         console.log(arg.foo); // OK
  27.         console.log(arg.bar); // Error!
  28.     }
  29.     else {
  30.         console.log(arg.foo); // Error!
  31.         console.log(arg.bar); // OK
  32.     }
  33. }
  35. doStuff({ foo: 123, common: '123' });
  36. doStuff({ bar: 123, common: '123' });