Object literals with satisfies operator for UI field mapping

Our Frontend is responsible for converting fields into labels that make more sense to users. So far I have seen the use of Enums to solve that purpose but we can also use Objects literals with satisfies and I believe its more developer friendly, flexible and when compiled, it resembles JS. Object literals: Meant to be used for key-value pairs. Object literals with satisfies: Preserves the exact literal types. A use case: Let’s say we have an Artist songs page that can be sorted by either title, album name, duration , and # of plays. Our sorting mechanism, in this case a REST API, allows sorting by any of the fields. First, I would create a declarative sort dropdown component where the keys match the API fields and the values offer user-friendly labels Solution with Object literal const artistSongSortOptions = { title: 'Title', albumName: 'Album name', duration: 'Duration', numberOfPlays: 'Number of Plays', } as const satisfies Record // We make object read-only by using as const // Create type from artistSongSortOptions keys type ArtistSongSortBy = keyof typeof artistSongSortOptions;

Apr 29, 2025 - 19:16

Object literals with satisfies operator for UI field mapping

Our Frontend is responsible for converting fields into labels that make more sense to users.

So far I have seen the use of Enums to solve that purpose but we can also use Objects literals with satisfies and I believe its more developer friendly, flexible and when compiled, it resembles JS.

Object literals: Meant to be used for key-value pairs.

Object literals with satisfies: Preserves the exact literal types.

A use case:

Let’s say we have an Artist songs page that can be sorted by either title, album name, duration , and # of plays. Our sorting mechanism, in this case a REST API, allows sorting by any of the fields.

First, I would create a declarative sort dropdown component where the keys match the API fields and the values offer user-friendly labels

Solution with Object literal

const artistSongSortOptions = {
  title: 'Title',
  albumName: 'Album name',
  duration: 'Duration',
  numberOfPlays: 'Number of Plays',
} as const satisfies Record<string, string>
// We make object read-only by using as const

// Create type from artistSongSortOptions keys
type ArtistSongSortBy = keyof typeof artistSongSortOptions;