Choose the property category

Question

Choose the property category

Is there a more efficient way to specify the type of a property in TypeScript without resorting to casting? Take a look at this example:

interface Overlay {
    type: "modal" | "drawer"
    other?: number
}

const rec = {
    obj1: { type: "modal" },
    obj2: { type: "drawer" },
    ...
}

The object rec currently has the type

{ obj1: { type: string }, obj2: { type: string } }

. The desired type is

{ obj1: Overlay, obj2: Overlay, ... }

.

I have attempted different methods:

Option 1 - effective but verbose and creates additional variables

const obj1: Overlay = { type: "modal" }
const obj2: Overlay = { type: "drawer" }
const ...
const rec = { obj1, obj2, ... }

Option 2 - prone to hiding errors (e.g. {} as Overlay is accepted by TS). Using satisfies only validates on a per-property basis.

const rec = {
    obj1: { type: "modal" } as Overlay,
    obj2: { type: "drawer" } as Overlay,
    ...
}

Option 3 - loses key type information (
```
"obj1" | "obj2" | ...
```
replaces with string)

const rec: Record<string, Overlay> = {
    obj1: { type: "modal" },
    obj2: { type: "drawer" },
    ...
}

Option 4 - overlooks details about the 'other' property and improperly sets the type of 'type' to either "modal" or "drawer" instead of the union type

const rec = {
    obj1: { type: "modal" },
    obj2: { type: "drawer" },
    ...
} as const

Are there better alternatives than #1 to achieve the correct type?

typescript

Answer 1

Answer №1

Using Record Type in TypeScript

A useful way to structure your data in TypeScript is by utilizing the Record type.

type AcceptedKey = 'obj1' | 'obj2' | 'obj3'

interface Overlay {
  type: 'modal' | 'drawer'
  other?: number
}

const rec: Record<AcceptedKey, Overlay> = {
  obj1: { type: 'modal' },
  obj2: { type: 'drawer' },
  obj3: { type: 'drawer' },
}

By defining a Record with specific keys and their corresponding data types, you can ensure type safety when working with objects. Each key from AcceptedKey must be present in the Record.

The syntax for the Record type is outlined below:

 /**
 * Construct a type with a set of properties K of type T
 */
type Record<K extends keyof any, T> = {
    [P in K]: T;
};

Utilizing Partial Record for Optional Keys

If you want some keys to be optional, you can combine Partial with Record like so:

const partialRec: Partial<Record<AcceptedKey, Overlay>> = {
  obj1: { type: 'modal' },
  obj2: { type: 'drawer' },
}

This approach works well for scenarios where you have a known set of keys with varying degrees of presence.

Flexible Key Formatting with Record

To allow for dynamic key names based on a format rather than fixed values, you can incorporate numeric types into string literals:

type AcceptedKeyFormat = `obj${number}`

interface Overlay {
  type: 'modal' | 'drawer'
  other?: number
}

const rec2: Record<AcceptedKeyFormat, Overlay> = {
  obj0: { type: 'modal' },
  obj1: { type: 'drawer' },
  obj999: { type: 'drawer' },
}

This method provides flexibility in defining keys and allows for varying sets of keys within each record.

Answer 2

Using Record Type in TypeScript

A useful way to structure your data in TypeScript is by utilizing the Record type.

type AcceptedKey = 'obj1' | 'obj2' | 'obj3'

interface Overlay {
  type: 'modal' | 'drawer'
  other?: number
}

const rec: Record<AcceptedKey, Overlay> = {
  obj1: { type: 'modal' },
  obj2: { type: 'drawer' },
  obj3: { type: 'drawer' },
}

By defining a Record with specific keys and their corresponding data types, you can ensure type safety when working with objects. Each key from AcceptedKey must be present in the Record.

The syntax for the Record type is outlined below:

 /**
 * Construct a type with a set of properties K of type T
 */
type Record<K extends keyof any, T> = {
    [P in K]: T;
};

Utilizing Partial Record for Optional Keys

If you want some keys to be optional, you can combine Partial with Record like so:

const partialRec: Partial<Record<AcceptedKey, Overlay>> = {
  obj1: { type: 'modal' },
  obj2: { type: 'drawer' },
}

This approach works well for scenarios where you have a known set of keys with varying degrees of presence.

Flexible Key Formatting with Record

To allow for dynamic key names based on a format rather than fixed values, you can incorporate numeric types into string literals:

type AcceptedKeyFormat = `obj${number}`

interface Overlay {
  type: 'modal' | 'drawer'
  other?: number
}

const rec2: Record<AcceptedKeyFormat, Overlay> = {
  obj0: { type: 'modal' },
  obj1: { type: 'drawer' },
  obj999: { type: 'drawer' },
}

This method provides flexibility in defining keys and allows for varying sets of keys within each record.

Choose the property category

Answer №1

Using Record Type in TypeScript

Utilizing Partial Record for Optional Keys

Flexible Key Formatting with Record

Similar questions

I'm curious about the significance of this in Angular. Can you clarify what type of data this is referring

What could be causing my TypeScript code to not be recognized as CommonJS?

Cypress automation script fails to trigger Knockout computed subscription

Having trouble resolving the signature of a class decorator when invoked as an expression with @Injectable in Angular

Tips for including an authorization token in an HTTP request

Want to enhance user experience? Simply click on the chart in MUI X charts BarChart to retrieve data effortlessly!

Detecting if a string is in sentence or title case with a typeguard

Issue - firestore has not been defined (Occurs strictly after the use of "then")

Displaying a React component within a StencilJS component and connecting the slot to props.children

Error message: The ofType method from Angular Redux was not found

Checking JavaScript files with TSLint

Leveraging Shared Modules Component across multiple modules in Angular can enhance code re

Type error TS2322: You can't assign type 'undefined' to type 'string'

The NullInjector has issued an error regarding the lack of a provider for the Decimal

Discovering a variable within an enzyme wrapper for the locate function

Is there a way to optimize Typescript compiler to avoid checking full classes and improve performance?

Issue found: Passing a non-string value to the `ts.resolveTypeReferenceDirective` function

What could be causing input to be blocked in certain situations while using my Angular directive with compile function?

The problem with the onClick event not triggering in Angular buttons

What is the best way to search for and isolate an array object within an array of objects using Javascript?