Check if Value with Unknown Type contains Property in TS

avatar
Borislav Hadzhiev

Last updated: Jan 23, 2023
2 min

banner

# Check if Value with Unknown Type contains Property in TS

Use a user-defined type guard to check if a value with unknown type contains a property in TypeScript.

The user-defined type guard consists of a function that checks if the specific property is contained in the object and returns a predicate.

index.ts
interface Person { name: string; age: string; } function isPerson(obj: unknown): obj is Person { return ( typeof obj === 'object' && obj !== null && 'name' in obj && 'age' in obj ); } const obj: unknown = { name: 'Bobby Hadz', age: 30, }; if (isPerson(obj)) { console.log(obj.name); // ๐Ÿ‘‰๏ธ "Bobby Hadz" console.log(obj.age); // ๐Ÿ‘‰๏ธ 30 }

check if value with unknown type contains property

We used a user-defined type guard to check if an object contains the name and age properties.

The obj is Person syntax is a type predicate where obj must be the name of the parameter the function takes.

We first check if the passed-in value has a type of object.

Unfortunately, we also have to check that the object isn't equal to null because null has a type of object in JavaScript (and TypeScript).

index.ts
console.log(typeof null); // ๐Ÿ‘‰๏ธ "object"

At this point, we can use the in operator to check if the name and age properties are contained in the object.

index.ts
const obj = { name: 'Bobby Hadz', age: 29, }; console.log('name' in obj); // ๐Ÿ‘‰๏ธ true console.log('age' in obj); // ๐Ÿ‘‰๏ธ true console.log('test' in obj); // ๐Ÿ‘‰๏ธ false

using in operator in typescript

The in operator checks if a specific property is contained in the object or its prototype chain and returns a boolean result - true if it is and false otherwise.

User-defined type guards are useful in this situation because in the if block TypeScript types the object to be of the specified type.

index.ts
interface Person { name: string; age: string; } function isPerson(obj: unknown): obj is Person { return ( typeof obj === 'object' && obj !== null && 'name' in obj && 'age' in obj ); } const obj: unknown = { name: 'Bobby Hadz', age: 30, }; if (isPerson(obj)) { // ๐Ÿ‘‰๏ธ obj is of type Person here console.log(obj.name); // ๐Ÿ‘‰๏ธ "Bobby Hadz" console.log(obj.age); // ๐Ÿ‘‰๏ธ 30 }

Once we are in the if block, TypeScript knows the obj variable has a type of Person and allows us to access all of the properties a Person has.

If you get the error that Object is of type 'unknown', click on the link and follow the instructions.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev