I'm learning Typescript and trying to wrap my head around how to set object type based on key(template literal)

Here's the example:

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

CodePudding user response：

You can use a mapped type with key remapping to associate a given TypeName to its corresponding ObjectType.

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

This will lead to the desired error if the types mismatch.

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

Playground

CodePudding user response：

Here's another implementation, if anyone interested:

interface Circle {
  radius: number;
}

interface Square {
  length: number;
}

type Shapes = {
  circle: Circle
  square: Square
}

type TypeName = "circle" | "square"; 

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

const t:Shape = {"square.foo": {length: 33}}