Loading...

How to pass a generic JSON object as a parameter to a method in TypeScript?

question typescript
Ram Patra Published on July 28, 2024

If you want to allow any JSON object without specifying its structure, you can use the object type, Record<string, any>, or simply any. However, each approach has its own implications for type safety and flexibility.

Using the object Type

The object type is used to represent non-primitive types, i.e., anything that is not a number, string, boolean, symbol, null, or undefined. However, it doesn’t provide type safety for the object’s properties.

function processJsonObject(json: object) {
    console.log(json);
}

const jsonObject = {
    name: "John Doe",
    age: 25,
    isStudent: true
};

processJsonObject(jsonObject);

Using Record<string, any>

The Record<string, any> type represents an object with string keys and values of any type. This is more flexible than the object type and allows you to access properties without TypeScript errors.

function processJsonObject(json: Record<string, any>) {
    console.log(json);
    console.log(json.name); // This is allowed
}

const jsonObject = {
    name: "John Doe",
    age: 25,
    isStudent: true
};

processJsonObject(jsonObject);

Using any

The any type can be used to represent any JavaScript value. It disables type checking for the parameter, making your function accept any type of input, including non-object types.

function processJsonObject(json: any) {
    console.log(json);
    console.log(json.name); // This is allowed, but type checking is disabled
}

const jsonObject = {
    name: "John Doe",
    age: 25,
    isStudent: true
};

processJsonObject(jsonObject);

Using unknown

If you want to allow any type but still maintain some type safety, you can use the unknown type. This forces you to perform type checks before accessing properties, making your code safer.

function processJsonObject(json: unknown) {
    if (typeof json === "object" && json !== null) {
        const jsonObj = json as Record<string, any>;
        console.log(jsonObj);
        console.log(jsonObj.name); // This is allowed after type assertion
    } else {
        console.log("Invalid JSON object");
    }
}

const jsonObject = {
    name: "John Doe",
    age: 25,
    isStudent: true
};

processJsonObject(jsonObject);

Conclusion

  • object: Use when you want to ensure the parameter is an object but don’t need to access its properties directly.
  • Record<string, any>: Use when you need flexibility to access properties while allowing any JSON structure.
  • any: Use when you don’t need type safety and want maximum flexibility.
  • unknown: Use when you want to allow any type but still enforce type checks within the function for safer code.

Depending on your use case and the level of type safety you need, you can choose the appropriate type for your generic JSON object parameter.

Take your presentation to the next level.

Put your face and name on your screen.

Your to-dos on your menu bar.

Fill forms using your right-click menu.

Ram Patra Published on July 28, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question typescript July 20, 2024 How to filter an Array based on a condition in Typescript?

Filtering an array based on a condition in TypeScript is straightforward and similar to how you would do it in JavaScript. TypeScript adds type safety to the process, ensuring that your code is more robust and less error-prone.

question eslint nextjs November 14, 2024 How to disable ESLint in a Nextjs project?

Although it is highly advisable to enable ESLint at all times, if you do not want ESLint to run during next build, you can set the eslint.ignoreDuringBuilds option in next.config.js to true like below:

question front-end javascript August 28, 2024 8 best Javascript libraries for building fast-changing tables

For handling fast-changing tables in JavaScript, you’ll want libraries that are optimized for performance, support real-time data updates, and are flexible enough to handle a wide range of use cases. Here are some of the best libraries:

Like my work?

Please, feel free to reach out. I would be more than happy to chat.