Typescript nullable keys in object array type declaration

Question

I'm using Typescript to write React Components. Currently I'm defining the types of props as Typescript type . Here's an example:

type Props = {
  id: number //required
  name: string | null //optional
}

type ParentProps = Array<Props>

let props:ParentProps = [
  {
      id:5,
      name:"new"
  },
  {
      id:7,
  }
]

//Gives error: Property 'name' is missing in type '{ id: number; }' but required in type 'Props' 

In this case I would like for the type ParentProps to be just an array of the type Props . In practice, the nullable name key works well for individual objects of type Prop . When declaring an object of type ParentProps this it gives shown in the snippet above.

For consistency with simpler components I would rather keep using type to define component props, rather than interface. Would anyone have any advice on how to get declare a type to define an array of types objects that allow for certain null keys.

Thank you.

Answer 1

What about define Props in following ways:

type Props = {
  id: number
  name?: string | null
}

or just

type Props = {
  id: number
  name?: string
}

Also, if you want to leave Props definition unchanged, you can change type ParentProps :

type ParentProps = Array< Omit<Props, "name"> & { name?: string|null } >