Creating an object with a property in typescript

Question

Creating an object with a property in typescript

Recently, I made the switch from JavaScript to TypeScript and now I am in the process of converting a lot of my code.

I used to frequently use this snippet in JavaScript (which has been converted to TypeScript):

function isObject (payload: any): payload is object {
  const type: string = Object.prototype.toString.call(payload).slice(8, -1)
  return type === 'Object'
}

In JavaScript, I would then proceed to do things like:

if (isObject(payload) && payload.id) return payload.id

However, when switching to TypeScript, I encountered an error stating that id does not exist on object.

Instead of returning payload is object in my isObject function, I believe it might be better to return an object with any properties having any values.

What would be the best approach to achieve this?

javascript typescript object properties

Answer 1

Answer №1

If you want to define it, consider using an index signature. However, the benefits may not outweigh just using any, as it doesn't seem to provide additional type safety compared to any.

function isObject (payload: any): payload is { [name: string]: any} {
    return typeof payload === 'object'; // this should work in the same way
}

let payload: any;
if (isObject(payload) && payload.id) payload.id

Consider utilizing strict null checks to potentially remove undefined from the result type:

function isObject (payload: any): payload is { [name: string]: object | number | string | boolean | undefined } {

    return typeof payload === 'object'
}

let payload: any;
if (isObject(payload) && payload.id) payload.id // payload.id now has type string | number | true | object here

Answer 2

If you want to define it, consider using an index signature. However, the benefits may not outweigh just using any, as it doesn't seem to provide additional type safety compared to any.

function isObject (payload: any): payload is { [name: string]: any} {
    return typeof payload === 'object'; // this should work in the same way
}

let payload: any;
if (isObject(payload) && payload.id) payload.id

Consider utilizing strict null checks to potentially remove undefined from the result type:

function isObject (payload: any): payload is { [name: string]: object | number | string | boolean | undefined } {

    return typeof payload === 'object'
}

let payload: any;
if (isObject(payload) && payload.id) payload.id // payload.id now has type string | number | true | object here

Creating an object with a property in typescript

Answer №1

Similar questions

Using the functionalities of the parent component

What could be causing my browser to not respond to the JavaScript function for clicking?

Properly implementing prototypal inheritance: best practices

Using multiple GET methods on a single route in Express and Sequelize can lead to conflicts

Finding curly brackets and commas using regular expressions

How to display an image in a pop-up with a title

ridiculing callback within parameter

Activating a hyperlink within a Div element by clicking on the Div itself

How can I use Jquery to loop through each combobox on the page and delete those with a specific class name?

jQuery effects failing to run properly in Internet Explorer

Best Practices for Handling URL-Encoded Form Data in the Latest Version of Next.js

Issues with AngularJS edit functionality for records not functioning as expected

Preserve numerous inputs in local storage

Tips for successfully interacting with dynamic text areas using Protractor:

Using Node.js to dynamically load HTML content

What is the recommended data type for the component prop of a Vuelidate field?

PhantomJS fails to trigger function within page.evaluate

The module 'pouchdb' appears to be missing, functioning correctly on Mac but encountering issues on Windows

What is the process for uploading a file to a server using Vue file manager?

Looking to enhance my JavaScript skills - Codepen samples welcome!