Hi,
In this post we will be exploring a feature of TypeScript called type guards. To be more precise we will be exploring the typeguard using the in
operator.
Note: The in
operator is javascript feature not TypeScript.
Consider the following scenario: I am writing a todo application. In my todo application I have two types of Todos:
- Anonymous Todo
- Validated Todo
Anonymous
todo have text and id fields. Lets write an interface for it
interface AnonymousTodo {
text: string;
id: number;
}
Validated
Todo is similar to anonymous todo but with two extra fields authorName
and validationDate
. Lets write interface for it too.
interface ValidatedTodo {
text: string;
id: number;
authorName: string;
validationDate: Date;
}
so far so good, now lets write a method which will print the todo to console. So if anonymous todo is passed we should prepend anonymous logging text and id, but if ValidatedTodo is passed we should prepend 🔒 before logging the todo details.
function printValidation(todo: AnonymousTodo | ValidatedTodo) {
}
so our function printValidation
accepts both AnonymousTodo
and ValidatedTodo
. But if you try to console.log(log.authorName)
; you will get the following error:
Property 'authorName' does not exist on type 'ValidatedTodo | AnonymousTodo'.
Property 'authorName' does not exist on type 'AnonymousTodo'.(2339)
Lets try to log id
instead of authorName
, that works fine. Now lets try to log text
, yes thats also works fine finally lets try to log validationDate
. we get similar error as before.
So why is that? This is because TypeScript wants to make sure we only access the properties which are available on both ValidatedTodo
and AnonymousTodo
, in our case these common properties are id
and text
. But we want to access authorName
and validationDate
too. How can we do that?
This is where Typeguard comes in. We can use the typeguard to narrow the type. So as of now todo
can be one of the two types. It can be either of type AnonymousTodo
or ValidatedTodo
. So we need to narrow it down for TypeScript, so TypeScript will know which type it is and will allow to access the properties available on it instead of allowing us to only access common properties. If it does not make sense do not worry. I have example coming up. Hopefully it will clear things up
There are multiple different type of guards available eg: instanceof
,typeof
etc. But in our case as we are using interface we will narrow the type using the in
operator. The in
operator is javascript language feature which can be used to check if a property is present in an object.
const myObj = {apple: 20};
if ("apple" in myObj) console.log(`We have ${myObj.apple} apples`);
So in the above snippet property apple
is present in the myObj
so we get true and a message will be logged to console. so lets integrate this in our example. Before we do that lets create objects of both type:
const todoWithValidation: ValidatedTodo = { text: "Ping", id: 1, validationDate: new Date(), authorName: "admin" };
const todoWithoutValidation: AnonymousTodo = { text: "Pong", id: 1 };
By looking at the both object we can see that ValidatedTodo
will always have validationDate
and authorName
. So we can tell TypeScript to all at these two properties to distinguish between the ValidatedTodo
and AnonymousTodo
and we can do that by adding a simple if
check which checks for these properties using the in
operator. lets write the code for this.
function printValidation(todo: AnonymousTodo | ValidatedTodo) {
if ("authorName" in todo && "validationDate" in todo) {
console.log(`🔒 ${todo.authorName}, ${todo.validationDate}, ${todo.text}`);
} else {
console.log(`Anonymous ${todo.id}, ${todo.text}`);
}
}
Inside the else block you can only access the properties of AnonymousTodo
and inside the if
block you can only access the properties of ValidatedTodo
and outside of these scope you can only access the common properties.
Bonus:
Instead of the if ("authorName" in todo && "validationDate" in todo)
we can also use a type predicate function:
function isValidatedTodo(todo: AnonymousTodo | ValidatedTodo): todo is ValidatedTodo {
return ("authorName" in todo && "validationDate" in todo);
}
Notice the return type type of the function. You can find more details on type predicate in the official docs. Thats all for now. If you want to play with code you can access it here.
Top comments (0)