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.

Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on July 28, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question typescript July 28, 2024 Interface vs Type alias in Typescript with some real-world examples showing when to use what

In TypeScript, both interface and type alias can be used to define the shape of an object. However, there are some differences and nuances between them. Here are the key differences:

question typescript javascript July 17, 2024 Difference between ?? and || in Typescript or Javascript?

In TypeScript (and JavaScript), the ?? (nullish coalescing operator) and || (logical OR operator) are both used to provide default values, but they behave differently in terms of the conditions under which they return the right-hand operand.

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: