Focusing in on a particular category of items based on a specific characteristic

Question

Focusing in on a particular category of items based on a specific characteristic

I can't seem to understand why typescript has an issue with the code below. The errors from the compiler are detailed in the comments within the code.

const FOO = Symbol();

function bar<T>(param: T) {
  if (param !== null && typeof param === "object" && FOO in param) {
    // Element implicitly has an 'any' type because expression of type 'unique symbol' can't be used to index type 'unknown'.
    // Property '[FOO]' does not exist on type 'unknown'.ts(7053)
    const foo = param[FOO];
    console.log(foo);
  }
}

function bar2<T>(param: T) {
  if (param !== null && typeof param === "object" && "FOO" in param) {
    // Element implicitly has an 'any' type because expression of type '"FOO"' can't be used to index type 'unknown'.
    // Property 'FOO' does not exist on type 'unknown'.ts(7053)
    const foo = param["FOO"];
    console.log(foo);
  }

Don't you think the if statement should narrow down the type sufficiently?

typescript

Answer 1

Answer №1

How do you feel about this approach? It may not be the most optimal solution, but it gets the job done... Try out in Playground

const BAR = Symbol();
function foo<T>(that: T) {
  if (that !== null && typeof that === "object" && hasProperty(that, BAR)) {
    const bar = that[BAR];
    console.log(bar);
  }
}

function foo2<T>(that: T) {
  if (that !== null && typeof that === "object" && hasProperty(that, "BAR")) {
    const bar = that["BAR"];
    console.log(bar);
  }
}

function hasProperty<P extends keyof any>(obj: any, prop: P): obj is { [_ in P]: unknown } {
    return prop in obj;
}

Answer 2

How do you feel about this approach? It may not be the most optimal solution, but it gets the job done... Try out in Playground

const BAR = Symbol();
function foo<T>(that: T) {
  if (that !== null && typeof that === "object" && hasProperty(that, BAR)) {
    const bar = that[BAR];
    console.log(bar);
  }
}

function foo2<T>(that: T) {
  if (that !== null && typeof that === "object" && hasProperty(that, "BAR")) {
    const bar = that["BAR"];
    console.log(bar);
  }
}

function hasProperty<P extends keyof any>(obj: any, prop: P): obj is { [_ in P]: unknown } {
    return prop in obj;
}

Answer 3

Answer №2

When your generic function lacks constraints, TypeScript is unable to determine the type T. As a result, it raises an error. TypeScript performs static type analysis rather than runtime analysis, so your if statement does not fit into the former category.

The strength of TypeScript lies in its explicitness. Therefore, if you already know that the attribute you will pass to the function (that) has a specific key (BAR), you should declare it in advance.

If you prefer to continue using generics, you can achieve this by:

const BAR = 'BAR';

interface Barable {
  [BAR]: any,
}

function foo<T extends Barable>(that: T) {
  if (that !== null && typeof that === "object" && BAR in that) {
    const bar = that[BAR];
    console.log(bar);
  }
}

/*
string alternative:
 
interface Barable {
    BAR: any,
}

.. and then your string function from above

*/

Note that TypeScript does not support interfaces with symbols as keys.

Additional Considerations

I'm unsure why you are using a generic in this scenario. If you know that you will be passing an object to this function and have some understanding of its structure, you could simply opt for using an interface instead.

Answer 4

When your generic function lacks constraints, TypeScript is unable to determine the type T. As a result, it raises an error. TypeScript performs static type analysis rather than runtime analysis, so your if statement does not fit into the former category.

The strength of TypeScript lies in its explicitness. Therefore, if you already know that the attribute you will pass to the function (that) has a specific key (BAR), you should declare it in advance.

If you prefer to continue using generics, you can achieve this by:

const BAR = 'BAR';

interface Barable {
  [BAR]: any,
}

function foo<T extends Barable>(that: T) {
  if (that !== null && typeof that === "object" && BAR in that) {
    const bar = that[BAR];
    console.log(bar);
  }
}

/*
string alternative:
 
interface Barable {
    BAR: any,
}

.. and then your string function from above

*/

Note that TypeScript does not support interfaces with symbols as keys.

Additional Considerations

I'm unsure why you are using a generic in this scenario. If you know that you will be passing an object to this function and have some understanding of its structure, you could simply opt for using an interface instead.

Focusing in on a particular category of items based on a specific characteristic

Answer №1

Answer №2

Similar questions

Mapped types: Specify mandatory properties depending on whether an array of identical objects includes a specific string value

Is it possible to utilize the inline/hardcoded type declared in the component.d.ts file for reuse

What is the process for creating a Deep Copy of an object in Angular?

What are the conditions for Jasmine's .toHaveBeenCalledWith to match the parameters?

An HTML table featuring rows of input boxes that collapse when the default value is not filled in

The application is unable to load due to a console error showing that the endpoint is unreachable

Angular is putting the page on ice - all clicks are officially off limits

When using ngx-slider in Angular, it unexpectedly fires off when scrolling on mobile devices

The process of setting up a dynamic cursor in ReactFlow with Liveblocks for precise zooming, panning, and compatibility with various screen resolutions

Is there a way to get interpolation working outside of onInit?

Using useRef as a prop in React with TypeScript

What is the best way to determine the type of a static property in a TypeScript class?

Achieving a similar functionality to Spring Security ACL in a Node.js AWS Lambda serverless environment

Can you explain the variance between the (Record<string, unknown>) and object type?

Utilizing Class Types in Generics with TypeScript

Exciting New Feature in WebStorm 2016.3: TypeScript Tooltips Inspired by VS Code!

What could have caused these errors, since they never made an appearance?

Can we guarantee the uniqueness of a function parameter value during compilation?

Encountering a sign-in issue with credentials in next-auth. The credential authorization process is resulting in a

Troubleshooting Missing Exports from Local Modules in React Vite (Transitioning from Create React App)