Experiencing a Typescript error when trying to access a property within a nested object

My current challenge involves typing an object, which seems to be error-free until I try to access a nested property and encounter the dreaded red squiggle.

After some research, I came across suggestions like this:

type FlagValue = string | boolean | number | { [key: string]: FlagValue };
type FlagSet = { [key: string]: FlagValue | FlagSet};

const defaultFlags: FlagSet = {
  tracking: false,
  banner: {
    display: false,
    message: "I am the man with no name, Zapp Brannigan!",
  },
  theme: "dark",
};

The typing of the object works well with this approach, but I face issues when trying to access nested properties.

https://i.stack.imgur.com/EOix2.png

...

Property 'display' does not exist on type 'FlagValue | FlagSet'.
  Property 'display' does not exist on type 'string'.

Any insights into what might be missing here?

Playground

typescripttypescript-typings

Answer №1

Hey, the variable defaultFlags.banner is defined as:

string | boolean | number | { [key: string]: FlagValue }

Therefore, you need to verify if the value is an object before treating it as one:

const showBanner =
   typeof defaultFlags.banner === 'object'
      ? defaultFlags.banner.display
      : false

Check Playground

Alternatively, you can update your declaration to use satisfies. This will enforce the restrictions of FlagSet, while retaining the inferred type from the assigned object literal.

const defaultFlags = {
  tracking: false,
  banner: {
    display: false,
    message: "I am the man with no name, Zapp Brannigan!",
  },
  theme: "dark",
} satisfies FlagSet

const showBanner = defaultFlags.banner.display

Check 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

React with TypeScript presents an unusual "Unexpected token parsing error"

Recently, I encountered an issue with my helper function that was originally written in JavaScript and was functioning perfectly. However, as soon as I introduced TypeScript into the mix, strange behaviors started to surface. Here is the snippet of code fr ...

reactjstypescriptfunctionobject

Struggling with importing aliases in TypeScript for shadcn-ui library

I am facing a challenge with resolving TypeScript path aliases in my project. I have set up the tsconfig.json file to include path aliases using the "baseUrl" and "paths" configurations, but alias imports are not functioning as intended. My goal is to imp ...

reactjstypescriptnext.jsshadcnui

Jasmine Destiny - Error Encountered: macroTask 'setTimeout': unable to switch to 'active' state, expecting 'planned' state, but it was 'notScheduled'

I am currently using Angular 7 with the Zone.js version of approximately ~0.8.26. Inside my test.ts file, I have included the import statement for 'zone.js/dist/zone-testing'. Below is a snippet from my spec file: import { HttpClientTestingModul ...

angulartypescriptunit-testingjasminekarma-jasmine

Can you explain how I can showcase JSON object values within an Angular framework?

After fetching data through a REST API in Angular, I need to display only the "classLevelPermissions" in table format as shown in the .html file. .ts - async getclp(className: string) { debugger; this.clplist = []; this.className = className ...

angulartypescriptparse-platform

Bringing in a script and invoking a function on a specific variable

As a newcomer to Typescript, I've been experimenting with some code I came across online to enhance the appearance of links on my website. <script src="https://wow.zamimg.com/widgets/power.js"></script> <script>var wowhead_tooltips ...

javascripttypescriptvisual-studio-codeangular8

Converting an array of arrays into an object with an index signature: A step-by-step guide

I find myself facing a challenge where I have two types, B and A, along with an array called "a". My objective is to convert this array into type B. Type A = Array<[string, number, string]>; Type B = { [name: string]: { name: ...

javascriptarraystypescriptecmascript-6

Removing redundant names from an array using Typescript

My task involves retrieving a list of names from an API, but there are many duplicates that need to be filtered out. However, when I attempt to execute the removeDuplicateNames function, it simply returns an empty array. const axios = require('axios&a ...

javascriptarraystypescript

What is the best way to convert an array of data into a dataset format in React Native?

Within my specific use case, I am seeking to reform the array structure prior to loading it into a line chart. In this context, the props received are as follows: const data = [26.727, 26.952, 12.132, 25.933, 12.151, 28.492, 12.134, 26.191] The objective ...

javascripttypescriptreact-native

Using an existing function with no arguments as a handler in Typescript and React: A Step-by-Step Guide

NOTE: I'm still learning Typescript, so I may be missing something obvious here. Let's consider a basic scenario in React Javascript, using a Material-UI Button: // Closing dialog event handler without needing an 'event' argument const ...

reactjstypescriptmaterial-ui

Utilizing either Maps or Objects in Typescript

I'm in the process of developing a simple Pizza Ordering App. The concept is, you select a pizza from a list and it's added to a summary that groups all the selections together. Here's how I want it to appear: Pizza Margarita 2x Pizza Sala ...

javascripthtmlangulartypescript

What is the best way to get both the id and name of a selected item in Angular?

Within my select field, data is dynamically populated based on names. My objective is to not only capture the selected name but also its corresponding ID. Here's a snippet of my HTML template: <select class="custom-select d-block w-100" id="test" ...

htmlangulartypescript

How can you manage state with ContextAPI and Typescript in a React application?

I seem to be facing an issue that I can't quite figure out. I have experience using ContextAPI without TypeScript, and I believe I'm implementing TypeScript correctly. However, something seems off as nothing happens when I call the setter. My goa ...

reactjstypescriptreact-statereact-typescriptreact-context

How can I showcase the captured image on Ionic 2?

I am having trouble displaying the selected or captured image on the page after uploading it through two methods - one using the gallery and the other using the camera. ** Here is my code ** 1) profile.html: <img class="profile-picture" src="{{baseUr ...

androidangulartypescriptionic-frameworkionic2

Mastering Two-Way Binding in Angular 2 with JavaScript Date Objects

I am currently utilizing Angular 2 and have encountered the following code: Within the JS file, this code initializes the employee-variable for the template: handleEmployee(employee : Employee){ this.employee = employee; this.employee.sta ...

angulartypescript

The Type {children: Element; } is distinct and does not share any properties with type IntrinsicAttributes

I am encountering an issue in my React application where I am unable to nest components within other components. The error is occurring in both the Header component and the Search component. Specifically, I am receiving the following error in the Header co ...

reactjstypescript

Clear out chosen elements from Angular Material's mat-selection-list

Looking for a way to delete selected items from an Angular Material list, I attempted to subtract the array of selected items from the initial array (uncertain if this is the correct approach). The challenge I face is figuring out how to pass the array of ...

angulartypescriptangular-material

"Utilize ngclass to set CSS classes based on enum string values

Is there a way to directly call an element in Angular when using an enum to organize component styles? Instead of writing multiple ng class expressions or dynamically passing them to the element call. button-types.ts export enum ButtonTypes { Primary ...

angulartypescript

Adding dropdowns to divs in Angular applications

Currently, I am attempting to integrate a dropdown feature into a div element. The HTML code for the dropdown is generated dynamically within the code. When clicking on the dropdown button, it appears functional but unfortunately, the dropdown itself does ...

angulartypescriptappendchildelementref

Are you looking to resolve TypeScript warnings related to imports managed by Webpack loaders?

Setting up a new project with Svelte, Webpack, and TypeScript based on this template. Ran the scripts/setupTypeScript.js script to switch to TypeScript after initial setup. Encountering errors in VSCode and TypeScript when importing non-TypeScript files: ...

typescriptwebpacksveltewebpack-file-loaderwebpack-loader

TensorflowJS Error: The property 'fetch' cannot be read as it is undefined

I am working on an Angular 7 application and attempting to load the mobilenet model by following the instructions in this example. To do this, I first installed tensorflowjs using the command npm install @tensorflow/tfjs (based on the steps provided in th ...

javascriptangulartypescripttensorflowtensorflow.js