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

Unable to configure unit tests for Vue project using Typescript due to TypeError: Unable to destructure property `polyfills` of 'undefined' or 'null'

The Next.js React framework seems to be having trouble reading user input from a

Waiting for Angular's For loop to complete

Steps to filter types by a singular property assessment

Definition of Stencil Component Method

Building a versatile component library for Next.js using TypeScript and Tailwind CSS: Step-by-step guide

Trying to filter an array of number|undefined in TypeScript to only include numbers is not identified as an array of numbers

The ngFor directive in Angular should be used with the Filter pipe to ensure that

A Project built with React and TypeScript that includes code written in JavaScript file

The application within the Main Module is not being acknowledged by the other components within the module

Tips for preserving @typedef during the TypeScript to JavaScript transpilation process

Jasmine and Karma encountered a TypeError stating that the function this.role.toLowerCase is not valid

Determine whether a many-to-many relationship involves a specific entity

What is the process of transforming two forms into components and then integrating those components into a view in Angular 5?

What is the best way to compare two date strings with the format dd/mm/yyyy using JavaScript?

Enhance Vuetify functionality using TypeScript for custom components

The type 'elementfinder' cannot be assigned to a parameter of type 'boolean'

Starting up a pre-existing Angular project on your local machine

Creating a Dynamic Example in Scenario Outline Using Typescript and Cypress-Cucumber-Preprocessor

``If you're looking to integrate a 360-degree product viewer into your Angular application, here is a