CODEWITHSUNDEEP
typescript
OuzKagan
OuzKagan

Reputation: 489

Nested object with dynamic keys in typescript

Tryping to implement type for position object where it stores dynamic keys and returns objects which I will destructure in React Component as props:


interface Position  {
 [key: NotificationPositions]: any
}

const positions:Record<NotificationPositions,any> = {
  'top': {
    top: "0",
    right: "0",
    left: "0",
    alignItems: "center",
  },
  "top-right": {
    top: "0",
    right: "0",
    alignItems: "flex-end",
  },
  "top-left": {
    top: "0",
    left: "0",
    alignItems: "flex-start",
  },
  'bottom': {
    bottom: "0",
    right: "0",
    left: "0",
    alignItems: "center",
  },
  "bottom-left": {
    bottom: "0",
    left: "0",
    alignItems: "flex-start",
  },
  "bottom-right": {
    bottom: "0",
    right: "0",
    alignItems: "flex-end",
  },
};

well I couldn't do it and I couldn't find information on the internet so I am asking here. Maybe answer is available on internet but I don't know how to search it. So any help is appriciated. Thanks.

Upvotes: 0

Views: 321

Answers (1)

dm.shpak
dm.shpak

Reputation: 355

Your data looks like react style attribute, so it looks like you need something like this

interface Position  {
 [key: NotificationPositions]: React.CSSProperties
}

Upvotes: 1

Related Questions