TypeScript nested object how to access them?

Question

I am working with a code that returns JSON | null type, hoping to change the value of a specific properties if those properties are

   some function...
   return {
        property_one: some_obj.property_one
    }

Objective is to change only a certain fields in this property_one that looks like

{
    name: 'Some Name',
    address: 'Some Address'
}

to { name: 'Some Name', address: 'this is private' }

but if I pass this property to a helper function to access nested object it complains.

Honestly, this is what I expected,

some_obj.property_one.address = '*this is private*';

but this raises an Error below.

> Property 'key' does not exist on type 'object'.

I even tried turning them into {[key:string]:unknown}, and surprisingly this works for one more level, but not further down.

const jsonlike:{[key:string]:unknown} = {"a":"first", "b":"Second", "c":"Third", "d": {"e":"Fifth"}}

console.log(typeof(jsonlike))

console.log(jsonlike.d) // works till here
console.log(jsonlike.d.e) // doesn't work, jsonlike.d' is of type 'unknown'.

Can anyone please guide me through what I'm not understanding in TypeScript?

Answer 1

Define a type that represents the structure of the nested object.

interface PropertyOne {
    name: string;
    address: string;
}

interface SomeObj {
    property_one: PropertyOne | null;
}

Use type assertion or type guard to safety access and modify the nested property

function modifyAddress(someObj: SomeObj) {
    if (someObj.property_one) { // Check if property_one is not null
        // Safely modify the address
        someObj.property_one.address = 'this is private';
    }
}

// Example usage:
const some_obj: SomeObj = {
    property_one: {
        name: 'Some Name',
        address: 'Some Address'
    }
};

modifyAddress(some_obj);
console.log(some_obj);

If you still want to work with {[key: string]: unknown}, you'll need to use type assertions:

interface NestedObj {
    e: string;
}

const jsonlike: {[key: string]: unknown} = {"a": "first", "b": "Second", "c": "Third", "d": {"e": "Fifth"}};

if (typeof jsonlike.d === 'object' && jsonlike.d !== null && 'e' in jsonlike.d) {
    const d = jsonlike.d as NestedObj;
    console.log(d.e); // Now you can access d.e
}