Guide to assigning object values according to properties/keys

Question

Guide to assigning object values according to properties/keys

I'm currently diving into Typescript and exploring how to dynamically set object types based on specific keys (using template literals).

Check out the code snippet below:

interface Circle {
  radius: number;
}

interface Square {
  length: number;
}

type TypeName = "circle" | "square"; 
type ObjectType<T> = 
  T extends "circle" ? Circle :
  T extends "square" ? Square :
  never

type Shape = {
    [id: `${TypeName}.${string}`]: ObjectType<TypeName>
}

const circle:Shape = {"circle.anythig": {length: 33}} // Square??
                   //  ^^^^^^ how to force the type based on object property key name?
const square:Shape = {"square.anythig": {length: 33}} // Square

Playground

typescript typescript-typings typescript-generics

Answer 1

Answer №1

To link a specific TypeName with its corresponding ObjectType, you can utilize a mapped type along with key remapping.

type Shape = {
    [ID in TypeName as `${ID}.${string}`]: ObjectType<ID>
}

If there is a discrepancy between the types, this approach will produce the intended error.

const shape: Shape = { 
  "circle.anything": { length: 33 },
                   //  ^^^^^^ Type '{ length: number; }' is not assignable to type 'Circle'
  "square.anything": { length: 33 }
}

Explore this concept further on the Playground

Answer 2

To link a specific TypeName with its corresponding ObjectType, you can utilize a mapped type along with key remapping.

type Shape = {
    [ID in TypeName as `${ID}.${string}`]: ObjectType<ID>
}

If there is a discrepancy between the types, this approach will produce the intended error.

const shape: Shape = { 
  "circle.anything": { length: 33 },
                   //  ^^^^^^ Type '{ length: number; }' is not assignable to type 'Circle'
  "square.anything": { length: 33 }
}

Explore this concept further on the Playground

Answer 3

Answer №2

If anyone is curious, here's an alternative approach:


interface Triangle {
  base: number;
  height: number;
}

type Shapes = {
  circle: Circle
  square: Square
  triangle: Triangle
}

type TypeName = "circle" | "square" | "triangle";

type Shape = {
    [ID in keyof Shapes as`${ID}.${string}`]: Shapes[ID]
}

const s:Shape = {"triangle.bar": {base: 10, height: 20}}

Answer 4

If anyone is curious, here's an alternative approach:


interface Triangle {
  base: number;
  height: number;
}

type Shapes = {
  circle: Circle
  square: Square
  triangle: Triangle
}

type TypeName = "circle" | "square" | "triangle";

type Shape = {
    [ID in keyof Shapes as`${ID}.${string}`]: Shapes[ID]
}

const s:Shape = {"triangle.bar": {base: 10, height: 20}}

Guide to assigning object values according to properties/keys

Answer №1

Answer №2

Similar questions

Angular 4 scatter chart with multiple data points using Google charts

The use of custom loaders alongside ts-node allows for more flexibility

When using the async pipe with Angular's ngFor, an error message indicates that the argument is

Can you provide information on the type signature of the `onChange` event for the MUI DatePicker?

Exploring SVG Graphics, Images, and Icons with Nativescript-vue

What allows us to create an instance of a generic class even without defining the generic type parameter?

Using Angular 2 to convert and display data as a particular object type in

Using Typescript and Next.js to handle error messages returned from Axios responses

Change number-type object fields to string representation

Angular Form Validation: Ensuring Data Accuracy

Modifying the value of a React input component is restricted when the "value" field is utilized

Error: The StsConfigLoader provider is not found! MSAL angular

Typescript - Conditional imports

Unable to retrieve HTTP call response during debugging, although it is visible in the browser

Enhance your AJAX calls with jQuery by confidently specifying the data type of successful responses using TypeScript

VS Code is throwing an Error TS7013, while Typescript remains unfazed

Generate a pre-signed URL for an AWS S3 bucket object using Typescript in NextJS, allowing for easy file downloads on the client-side using @aws-sdk/S3Client

Developing a versatile table component for integration

What is the reason that control flow analysis does not support the never type?

Changes in tabs are discarded when switching between them within Material UI Tabs