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

Pull in class definitions from the index.js file within the node_modules directory

How do I fix the build error that says "Operator '+' cannot be used with types 'number[]'?

Error message appears when trying to render a shallow mock of a React.Component that extends MyInterface with any type

Can data from an Angular app be accessed by an external JavaScript code within the same project?

Electron and React: Alert - Exceeded MaxListenersWarning: Potential memory leak detected in EventEmitter. [EventEmitter] has 21 updateDeviceList listeners added to it

Managing HTTP errors using async/await and the try/catch block in a React application with TypeScript

Having difficulties generating ngc and tsc AOT ES5 compatible code

In Angular Google Maps, here's a step-by-step guide on how to zoom in

TypeScript is encountering difficulty locating a node module containing the index.d.ts file

Help with Material-UI: Passing unique props to a custom TreeItem component

Is there a way to resolve the issue of retrieving the processed value directly in NestJS's @OnEvent function?

Full compatibility with Angular 2 is now available on Visual Studio 2015 with the added support of

Setting the [required] attribute dynamically on mat-select in Angular 6

Ways to retrieve the property of an object within a view while being sourced from an observable

Execute TSC on the Hosted Build Agent

Can we specify the type of a destructured prop when passing it as an argument?

Styles are not applied by Tailwind to components in the pages folder

How can we avoid printing out undefined data from an Observable in Angular 2?

How to show specific images by clicking on particular items in Ionic 3 on a separate page

What could be causing the Typescript error when utilizing useContext in combination with React?