Unlocking the secret to accessing keys from an unidentified data type in TypeScript

The code snippet above will not compile due to an error with the email protection link.

const foo: unknown = {bar: 'baz'}

if (foo && typeof foo === 'object' && 'bar' in foo) {
  console.log(foo.bar)
}

An error message from TSC is:

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

How can one convince tsc that foo can have keys with arbitrary names without having to explicitly cast?

For a working example, check out this playground link. https://www.typescriptlang.org/play?#code/MYewdgzgLgBAZiEAuGBXMBrMIDuYYC8MA3gEYCGATigOQUBeNAvgFAsCWcMAFAiDADIBMKAE8ADgFMQXPoQJEaIUgCtJwKDUHC6VLe3x8AlCRYwYoSCAA2kgHTWQAc16I7FSkZZMgA

typescriptstructural-typing

Answer №1

If you encounter the type unknown, one possible solution is to cast the object foo as type any or create an interface with bar as a property.

const foo: unknown = {bar: 'baz'};

console.log((foo as any).bar);

Alternatively,

const foo: unknown = {bar: 'baz'};

interface HasBar {
   bar: string;
}

console.log((foo as HasBar).bar);

Answer №2

Explore the concept of user-defined type guards. You can determine if an element belongs to a specific type by using this method:

type Bar = {bar: string};

function isBar(element: unknown): element is Bar  {
  return (element as Bar).bar !== undefined;
}

const foo: unknown = {bar: 'baz'}
if (isBar(foo)) {
  console.log(foo.bar)
}

Visit Playground

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on implementing a cordova plugin in a TypeScript cordova application

In my Cordova project, which utilizes Angular and Typescript, I am facing issues with implementing the juspay-ec-sdk-plugin for Cordova. I have explored possible solutions on StackOverflow related to integrating Cordova plugin in an Angular 4 Typescript ...

angulartypescriptcordova

Ways to transfer data from TypeScript to CSS within Angular 6

Trying to work with ngClass or ngStyle, but I'm struggling with passing the value. Here's my current code: strip.component.ts import { ... } from '@angular/core'; @Component({ selector: 'app-strip', templateUrl: &apo ...

htmlcssangulartypescript

TypeScript overloading error: Anticipated 0 parameters, received 2 instead

I am facing an issue with a class containing an overloaded method that has two versions. One version does not take any arguments, while the second one can take two arguments. class DFD { ... getEndDatetime(): string; getEndDatetime(startTime?: ...

typescript

When working with the latest version of Angular CLI, make sure to include a @NgModule annotation in

Just a heads up: I'm diving into Angular for the first time, so bear with me if I make some rookie mistakes. The Lowdown I've got the latest version of Angular CLI up and running The default app loads without a hitch after 'ng serve' ...

angulartypescriptangular-cliangularjs-ng-model

It appears that TypeScript is generating incorrect 'this' code without giving any warning

I seem to be facing some resistance filing a feature request related to this on GitHub issues, so I'll give it a shot here. Here is the code snippet that caused me trouble: export class Example { readonly myOtherElement: HTMLElement; public ...

typescript

What is the reasoning behind TypeScript's decision to permit the omission of a function's return type?

After setting noImplicitAny to true in my tsconfig, I was surprised to find that I could still omit function return types. One instance is a getter function as shown below: get name() { return `${this.valueName} of ${this.suitName}`; } Inquiry 1: Can ...

typescript

Are you struggling with perplexing TypeScript error messages caused by a hyphen in the package name?

After creating a JavaScript/TypeScript library, my goal is for it to function as: A global variable when called from either JavaScript or TypeScript Accessible via RequireJS when called from either JavaScript or TypeScript Complete unit test coverage Th ...

javascripttypescriptnpmumd

Inheriting Angular components: How can the life cycle hooks of a parent component be triggered?

So I'm working with BaseComponent and a number of child components that extend it: export class Child1Component extends BaseComponent implements OnInit, AfterViewInit In the case of Child1Component, there is no explicit call to super.ngAfterViewInit ...

angulartypescriptprototypal-inheritance

How to use $$[n] in Spectron/WebdriverIO to target the nth child element instead of the selector

Attempting to utilize Spectron for testing my Electron application has been challenging. According to the documentation, in order to locate the nth child element, you can either use an nth-child selector or retrieve all children that match a selector using ...

javascripttypescriptelectronwebdriver-iospectron

How is it that in TypeScript, a potential numeric value in an interface can be transformed into an impossible numeric value in a class implementation?

Encountered a surprising behavior from the TypeScript compiler today. Unsure if it's a bug or intentional feature. If it is indeed intentional, I would like to understand the reasoning behind it. The issue arises when declaring an interface method wi ...

typescriptimplicit-conversionlanguage-designtype-systems

How can I prevent the installation of my Ionic 2 application on devices that have been rooted or jailbroken?

I am currently working on a project involving an Ionic 2 and Angular 2 application. I need to implement a feature that checks whether the device is rooted (in the case of Android) or jailbroken (in the case of iOS). I have experimented with various packag ...

angulartypescriptcordovaionic2

What is the best way to obtain a reference to an instance of my Angular 2 directive?

Angular 2 rc 5 was written using typescript 1.9 I am trying to access the instance of my attribute directive. Although I am using ViewChild, which typically works with components, it is giving me a handle to the element containing the directive. template ...

angulartypescriptangular2-directives

What is the process for redirecting an API response to Next.js 13?

Previously, I successfully piped the response of another API call to a Next.js API response like this: export default async function (req, res) { // prevent same site/ obfuscate original API // some logic here fetch(req.body.url).then(r => ...

javascripttypescriptnext.jsfetch-apinext.js13

I am currently working to resolve this particular wildcard issue with the help of TypeScript

I've been working on solving the wildcard problem with TypeScript, but I'm running into issues with some of the test cases I've created. Here's a brief overview of how the code operates: A balanced string is one where each character ap ...

typescriptstringwildcard

Tips on preventing the need to redeclare property types in React constructor with Typescript

Imagine having a class structured like this: class PeopleByTag extends React.Component<RouteComponentProps<{ tag: string }> In order to perform actions in the constructor, such as fetching data, you typically need to define a props parameter. Ho ...

reactjstypescript

Utilizing the async pipe and subscribe method in Angular for handling multiple instances of *ngIf conditions

I'm currently experiencing an issue with my Angular setup and I am struggling to identify what the exact problem is. To provide some context before diving into the problem itself: Within a class called data-service.ts, there exists a method named "g ...

angulartypescriptrxjsobservable

Is there a way to utilize const assertions to retrieve the explicit types from objects nested at various levels?

In reference to this question, the previous structure had a depth of 2: const grandkids = { Karen: { Ava: ['Alice', 'Amelia'], Emma: ['Sarah'], }, Mary: { Sophia: ['Grace'], }, } as const; To ext ...

typescripttypes

Tips for maintaining the active state of an item within a component that loops through a dataset

I am working with an array of objects (specifically, posts represented as strings) and I am looking to be able to edit each one individually. However, I am encountering an issue where clicking on the edit button triggers editing for all posts at once: co ...

javascriptreactjstypescript

Definition of type instantiation in TypeScript

When utilizing the mynew function with a specified array of classes, I am encountering an error related to defining unknown. How can I modify this definition in order to eliminate the error? export interface Type<T> extends Function { new (...arg ...

typescript

Unable to transmit props while employing Typescript in ReactJS

Attempting to pass props from components like AllProducts, MenProducts, etc. to the AddToCartButton component for reusability presents a challenge. When trying to pass props using: <AddToCartButton id={product.id} /> An error is encountered: Type & ...

reactjstypescriptreact-props