Unveiling typescript property guards for the unknown data type

Question

Unveiling typescript property guards for the unknown data type

Is there a way to type guard an unknown type in TypeScript?

const foo  = (obj: unknown) => {
    if (typeof obj === 'object' && obj) {
        if ('foo' in obj && typeof obj.foo === 'string') {
            return obj.foo;
        }
    }
};

However, I am encountering an issue

Property 'foo' does not exist on type 'object'.

I also tried using the is expression but it doesn't work as expected:

const foo  = (obj: unknown): obj is { foo: 'string' } => {
    if (typeof obj === 'object' && obj) {
        if ('foo' in obj && typeof obj.foo === 'string') {
            return obj;
        }
    }
    throw new Error();
};

typescript typeguards

Answer 1

Answer №1

To improve the functionality of TypeScript, you may need to provide some assistance:

type customObj = object & { custom: unknown };
const customFunction = (obj: unknown) => {
    if (typeof obj === 'object' && obj) {
        if ('custom' in obj && typeof (obj as customObj).custom === 'string') {
            return (obj as customObj).custom;
        }
    }
};

Answer 2

To improve the functionality of TypeScript, you may need to provide some assistance:

type customObj = object & { custom: unknown };
const customFunction = (obj: unknown) => {
    if (typeof obj === 'object' && obj) {
        if ('custom' in obj && typeof (obj as customObj).custom === 'string') {
            return (obj as customObj).custom;
        }
    }
};

Answer 3

Answer №2

Consider implementing this helper function:

const hasProperty = <Obj, Prop extends string>(obj: Obj, prop: Prop)
  : obj is Obj & Record<Prop, unknown> =>
  Object.prototype.hasOwnProperty.call(obj, prop);

for your specific scenario. The in operator typically works well with unions. Refer to this link, here, and here

Functional code snippet:

const hasProperty = <Obj, Prop extends string>(obj: Obj, prop: Prop)
  : obj is Obj & Record<Prop, unknown> =>
  Object.prototype.hasOwnProperty.call(obj, prop);

const foo = (obj: unknown) => {
  if (typeof obj === 'object' && obj) {
    if (hasProperty(obj, 'foo') && typeof obj.foo === 'string') {
      return obj.foo;
    }
  }
};

Playground

If you wish to throw an error when obj is invalid, utilize the assert function:

const hasProperty = <Obj, Prop extends string>(obj: Obj, prop: Prop)
  : obj is Obj & Record<Prop, unknown> =>
  Object.prototype.hasOwnProperty.call(obj, prop);

function foo(obj: unknown): asserts obj is { foo: string } {
  const isValid =
    typeof obj === 'object' &&
    obj &&
    hasProperty(obj, 'foo') &&
    typeof obj.foo === 'string';

  if (!isValid) {
    throw new Error();
  }

};

declare var obj: unknown;

foo(obj);

obj.foo // ok

Playground

Answer 4

Consider implementing this helper function:

const hasProperty = <Obj, Prop extends string>(obj: Obj, prop: Prop)
  : obj is Obj & Record<Prop, unknown> =>
  Object.prototype.hasOwnProperty.call(obj, prop);

for your specific scenario. The in operator typically works well with unions. Refer to this link, here, and here

Functional code snippet:

const hasProperty = <Obj, Prop extends string>(obj: Obj, prop: Prop)
  : obj is Obj & Record<Prop, unknown> =>
  Object.prototype.hasOwnProperty.call(obj, prop);

const foo = (obj: unknown) => {
  if (typeof obj === 'object' && obj) {
    if (hasProperty(obj, 'foo') && typeof obj.foo === 'string') {
      return obj.foo;
    }
  }
};

Playground

If you wish to throw an error when obj is invalid, utilize the assert function:

const hasProperty = <Obj, Prop extends string>(obj: Obj, prop: Prop)
  : obj is Obj & Record<Prop, unknown> =>
  Object.prototype.hasOwnProperty.call(obj, prop);

function foo(obj: unknown): asserts obj is { foo: string } {
  const isValid =
    typeof obj === 'object' &&
    obj &&
    hasProperty(obj, 'foo') &&
    typeof obj.foo === 'string';

  if (!isValid) {
    throw new Error();
  }

};

declare var obj: unknown;

foo(obj);

obj.foo // ok

Playground

Unveiling typescript property guards for the unknown data type

Answer №1

Answer №2

Similar questions

Setting up NextJs in Visual Studio Code with Yarn

Disregard the JSON formatting and extract solely the values

Parsing temporary storage of database query results

Toggle the visibility of a dropdown menu based on the checkbox being checked or unchecked

JavaScript cannot determine the length of an array of objects

Why isn't the customer's name a part of the CFCustomerDetails class?

Exploring Cypress: Leveraging the Power of Variable Assignment

Enhancing component and view functionality in Angular

Difficulty accessing class functions from the test application in Node.js NPM and Typescript

What causes type checks to be skipped when spreads are used on type-guarded types?

Tips for creating a redirect to a specific page after clicking a link in an email using Angular

Resolve an "Uncaught ReferenceError" by importing an unused component to fix the error of not being able to access a variable before initialization

What kind of type is recommended to use when working with async dispatch in coding?

Having trouble importing a TypeScript module from the global node_modules directory

Can you provide guidance on integrating TypeScript with React version 15.5?

Executes the function in the child component only if the specified condition evaluates to true

Is there a way to determine if a tuple is of infinite or finite length?

What is the best way to troubleshoot substrings for accurately reading URLs from an object?

Issue: Angular 14 - Validators Not Resetting in Nested FormGroup

Utilizing Typescript to retrieve a specific object property using square brackets and a variable