Converting a dynamic JSON object into a generic type in TypeScript

Question

Converting a dynamic JSON object into a generic type in TypeScript

I need assistance with converting a JSON object into the equivalent generic type in TypeScript.

The JSON object I have contains dynamic keys such as applications and permissions. The keys inside applications, like application_management and user_management, can also be dynamic. Similarly, the keys inside permissions, such as create_application, delete_application, update_application, etc., can be dynamic as well.

I attempted to accomplish this using an interface but unfortunately faced challenges. Could someone please help me resolve this issue?

{
            "id": 1,
            "isSuperAdmin": true,
            "firstName": "Oleksii",
            "lastName": & "Michael",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="452429203d3505352a2c2b31773220276b262a28">[email protected]</a>",
            "gender": "male"",
            "dob": "1990-01-01",
            "photo": null,
            "status": "ACTIVE",
            "roles": [
                {
                    "id": 1,
                    "slug": "Head of Department-(Account Management-Network-P2W North America)"
                },
                {
                    "id": 2,
                    "slug": "Team Lead-(Account Management-Network-P2W North America)"
                },
                {
                    "id": 3,
                    "slug": "Employee-(Account Management-Network-P2W North America)"
                }
            ],
            "applications": {
                "application_management": {
                    "id": 41,
                    "slug": "application_management",
                    "appName": "Application Management",
                    "status": "ACTIVE",
                    "appType": "CODED",
                    "appUrl": "application-management",
                    "appIcon": "http://api.chromosome-studio.com/uploads/applications/application.png",
                    "permissions": {
                        "delete_application": {
                            "id": 3,
                            "action": "Delete Application",
                            "slug": "delete_application",
                            "level": "all"
                        },
                        "update_application": {
                            "id": 2,
                            "action": "Update Application",
                            "slug": "update_application",
                            "level": "all"
                        },
                        "create_application": {
                            "id": 1,
                            "action": "Create Application",
                            "slug": "create_application",
                            "level": "all"
                        }
                    }
                },
                


                "user_management": {
                    "id": 42,
                    "slug": "user_management",
                    "appName": "User Management",
                    "status": "ACTIVE",
                    "appType": "CODED",
                    "appUrl": "user-management",
                    "appIcon": "http://api.chromosome-studio.com/uploads/applications/users.png",
                    "permissions": {
                        "create_user": {
                            "id": 4,
                            "action": "Create User",
                            "slug": "create_user",
                            "level": "all"
                        }
                    }
                }
            }

typescript generics typescript-generics

Answer 1

Answer №1

Oh no, another Romain beat me to it. However, my solution offers a slight variation

type Role = { id: number; slug: string };
type ObjectStatus = 'ACTIVE' | 'INACTIVE'; 
type AppType = 'CODED' | 'DYNAMIC';
type PermissionLevel = 'all' | 'admin' | 'guest'; 

type ApplicationsType = 'user' | 'application';
type CrudTypes = 'delete' | 'update' | 'create';
type PermissionKeys = `${CrudTypes}_application`;

type Permission<NAME extends ApplicationsType, CRUD extends CrudTypes = CrudTypes> = {
    id: number;
    action: `${Capitalize<CRUD>} ${Capitalize<NAME>}`;
    slug: `${CRUD}_${NAME}`;
    level: PermissionLevel;
};

type Application<NAME extends ApplicationsType> = {
    id: number;
    slug: `${NAME}_management`;
    appName: `${Capitalize<NAME>} Management`;
    status: ObjectStatus;
    appType: AppType;
    appUrl: `${NAME}-management`;
    permissions: { [key in PermissionKeys]?: Permission<NAME> };

    [key: string]: unknown;
};

type ApplicationList = { [key in ApplicationsType as `${key}_management`]?: Application<key> };

type User = {
    id: 1;
    isSuperAdmin: true;
    firstName: string;
    lastName: string;
    email: string;
    gender: string | null;
    dob: string | null;
    photo: string | null;
    status: ObjectStatus;
    roles: Array<Role>;
    applications: ApplicationList;
};

Upon applying this type to your input, I encountered compilation errors on

application.user_management.appName, which should be 'User Management'
application.user_management.permission.create_application.action, expected to be 'Create User'
application.user_management.permission.create_application.slug, anticipated to be 'create_user'

A minor update was made to refine the typing of permission list due to imperfect typing issues

type PermissionList<NAME extends ApplicationsType> = { [key in CrudTypes as `${key}_${NAME}`]?: Permission<NAME, key> };

Then make the replacement in Application :

permissions: PermissionList<NAME>;

This resulted in an additional error on

application.user_management.permission.create_application, now expected to be 'create_user', allowing only 'Create' as a crud action.

playground

Answer 2

Oh no, another Romain beat me to it. However, my solution offers a slight variation

type Role = { id: number; slug: string };
type ObjectStatus = 'ACTIVE' | 'INACTIVE'; 
type AppType = 'CODED' | 'DYNAMIC';
type PermissionLevel = 'all' | 'admin' | 'guest'; 

type ApplicationsType = 'user' | 'application';
type CrudTypes = 'delete' | 'update' | 'create';
type PermissionKeys = `${CrudTypes}_application`;

type Permission<NAME extends ApplicationsType, CRUD extends CrudTypes = CrudTypes> = {
    id: number;
    action: `${Capitalize<CRUD>} ${Capitalize<NAME>}`;
    slug: `${CRUD}_${NAME}`;
    level: PermissionLevel;
};

type Application<NAME extends ApplicationsType> = {
    id: number;
    slug: `${NAME}_management`;
    appName: `${Capitalize<NAME>} Management`;
    status: ObjectStatus;
    appType: AppType;
    appUrl: `${NAME}-management`;
    permissions: { [key in PermissionKeys]?: Permission<NAME> };

    [key: string]: unknown;
};

type ApplicationList = { [key in ApplicationsType as `${key}_management`]?: Application<key> };

type User = {
    id: 1;
    isSuperAdmin: true;
    firstName: string;
    lastName: string;
    email: string;
    gender: string | null;
    dob: string | null;
    photo: string | null;
    status: ObjectStatus;
    roles: Array<Role>;
    applications: ApplicationList;
};

Upon applying this type to your input, I encountered compilation errors on

application.user_management.appName, which should be 'User Management'
application.user_management.permission.create_application.action, expected to be 'Create User'
application.user_management.permission.create_application.slug, anticipated to be 'create_user'

A minor update was made to refine the typing of permission list due to imperfect typing issues

type PermissionList<NAME extends ApplicationsType> = { [key in CrudTypes as `${key}_${NAME}`]?: Permission<NAME, key> };

Then make the replacement in Application :

permissions: PermissionList<NAME>;

This resulted in an additional error on

application.user_management.permission.create_application, now expected to be 'create_user', allowing only 'Create' as a crud action.

playground

Answer 3

Answer №2

Below is a defined type for your JSON object:

    type JsonObjectType = {
        id: number;
        isAdmin: boolean;
        firstName: string;
        lastName: string;
        email: string;
        gender: string | null;
        dob: string | null;
        photo: string | null;
        status: "ACTIVE";
        roles: {
            id: number;
            slug: string;
        }[];
        applications: Record<string, {
            id: number;
            slug: string;
            appName: string;
            status: "ACTIVE";
            appType: "CODED";
            appUrl: string;
            appIcon: string;
            permissions: Record<string, {
                id: number;
                action: string;
                slug: string;
                level: "all";
            }>;
        }>
    };

The usage of Record<KeyType,ValueType> allows for dynamic properties with string keys and complex typed values.

Answer 4

Below is a defined type for your JSON object:

    type JsonObjectType = {
        id: number;
        isAdmin: boolean;
        firstName: string;
        lastName: string;
        email: string;
        gender: string | null;
        dob: string | null;
        photo: string | null;
        status: "ACTIVE";
        roles: {
            id: number;
            slug: string;
        }[];
        applications: Record<string, {
            id: number;
            slug: string;
            appName: string;
            status: "ACTIVE";
            appType: "CODED";
            appUrl: string;
            appIcon: string;
            permissions: Record<string, {
                id: number;
                action: string;
                slug: string;
                level: "all";
            }>;
        }>
    };

The usage of Record<KeyType,ValueType> allows for dynamic properties with string keys and complex typed values.

Converting a dynamic JSON object into a generic type in TypeScript

Answer №1

Answer №2

Similar questions

How can I retrieve the decimal x and y coordinates when the mouse is moved in Typescript Angular?

What is the best way to access buffer data in TypeScript for Solana?

Converting JSON data into TypeScript interface objects within an Angular 2 environment

What is the best way to clear all content from the "textarea" and input fields after submitting?

When executing the release command in Ionic 3, the Angular AoT build encountered a failure

Unable to retrieve query within async function, unable to import graphql queries externally

The 'src' properties in nextjs/image are of different types and therefore cannot be used interchangeably

Ionic 2 Media Plugin File Status with Ionic Native

Transform JSON object to a class/interface object using Typescript

Encountering a TypeScript error while calling a Vue lifecycle hook method

What is the proper syntax for defining an object property as a function?

Implementing an Asynchronous Limited Queue in JavaScript/TypeScript with async/await

Encountering compilation errors while using ng serve in NGCC

Encountering an issue in the test file when using react-router-dom v6: "The 'history' property is not found on the 'IntrinsicAttributes & RouterProps' type."

Guide on Implementing Link href in Next.js v12

The unexpected identifier 'express' was encountered in the import call, which requires either one or two arguments

Why does the implementation of my interface differ from what is specified in the TypeScript documentation?

Create a list of items with checkboxes next to each that can be repeated using PdfMake

Navigating to a component route in Angular

Http' does not have the 'update' property