8 replies

Dynamic record with value type depending on key suffix

I need to create a list of records for a scatter chart data with error bars. There can be an arbitrary number of datasets in this chart.

The record contains a

key representing the x-axis position (value type

number

number

${datasetID}_value

${datasetID}_value

key representing the value of the dataset with given id (value type

number

number

) and

${datasetID}_errors

${datasetID}_errors

representing the errors of the value at this position (type

[number, number]

[number, number]

).

I want to be able to push a valid record into the list without TS errors like so

type DataRecord = ??? // TODO: define this
type DataList = DataRecord[]

const myData: DataList = []

// goal is for this to work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
})

// this should also work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
  [`${id2}_value`]: 2,
  [`${id2}_error`]: [1, 1],
})

type DataRecord = ??? // TODO: define this
type DataList = DataRecord[]

const myData: DataList = []

// goal is for this to work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
})

// this should also work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
  [`${id2}_value`]: 2,
  [`${id2}_error`]: [1, 1],
})

I'm not sure if this is possible since the prop inside the push() call is being treated as

{x: number; [x: string]: number | number[]}

{x: number; [x: string]: number | number[]}

, so I'd love to get help on this, thank you so much. Here is my progress so far: TS Playground

Solution

i think your problem is that

id

id

needs to be a string literal (not just type string)

type DataRecord = {
  [key: `${string}_value`]: number
  [key: `${string}_error`]: [number, number],
  x: number
}

type DataList = DataRecord[]

const myData: DataList = []

const id1 = 'key1'
const id2 = 'key2'

// goal is for this to work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
})

// this should also work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
  [`${id2}_value`]: 2,
  [`${id2}_error`]: [1, 1],
})

type DataRecord = {
  [key: `${string}_value`]: number
  [key: `${string}_error`]: [number, number],
  x: number
}

type DataList = DataRecord[]

const myData: DataList = []

const id1 = 'key1'
const id2 = 'key2'

// goal is for this to work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
})

// this should also work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
  [`${id2}_value`]: 2,
  [`${id2}_error`]: [1, 1],
})

this works because typeof key1 and key2 is inferred as literal

key1

key1

and

key2

key2

(as it's a const assignment). this way ts knows that the same key is not defined twice.

Jump to solution

Dynamic record with value type depending on key suffix

I need to create a list of records for a scatter chart data with error bars. There can be an arbitrary number of datasets in this chart.

The record contains a

key representing the x-axis position (value type

number

number

${datasetID}_value

${datasetID}_value

key representing the value of the dataset with given id (value type

number

number

) and

${datasetID}_errors

${datasetID}_errors

representing the errors of the value at this position (type

[number, number]

[number, number]

).

I want to be able to push a valid record into the list without TS errors like so

type DataRecord = ??? // TODO: define this
type DataList = DataRecord[]

const myData: DataList = []

// goal is for this to work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
})

// this should also work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
  [`${id2}_value`]: 2,
  [`${id2}_error`]: [1, 1],
})

type DataRecord = ??? // TODO: define this
type DataList = DataRecord[]

const myData: DataList = []

// goal is for this to work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
})

// this should also work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
  [`${id2}_value`]: 2,
  [`${id2}_error`]: [1, 1],
})

I'm not sure if this is possible since the prop inside the push() call is being treated as

{x: number; [x: string]: number | number[]}

{x: number; [x: string]: number | number[]}

, so I'd love to get help on this, thank you so much. Here is my progress so far: TS Playground

Solution

i think your problem is that

id

id

needs to be a string literal (not just type string)

type DataRecord = {
  [key: `${string}_value`]: number
  [key: `${string}_error`]: [number, number],
  x: number
}

type DataList = DataRecord[]

const myData: DataList = []

const id1 = 'key1'
const id2 = 'key2'

// goal is for this to work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
})

// this should also work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
  [`${id2}_value`]: 2,
  [`${id2}_error`]: [1, 1],
})

type DataRecord = {
  [key: `${string}_value`]: number
  [key: `${string}_error`]: [number, number],
  x: number
}

type DataList = DataRecord[]

const myData: DataList = []

const id1 = 'key1'
const id2 = 'key2'

// goal is for this to work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
})

// this should also work
myData.push({
  x: 0,
  [`${id1}_value`]: 1,
  [`${id1}_error`]: [0, 1],
  [`${id2}_value`]: 2,
  [`${id2}_error`]: [1, 1],
})

this works because typeof key1 and key2 is inferred as literal

key1

key1

and

key2

key2

(as it's a const assignment). this way ts knows that the same key is not defined twice.

Jump to solution

Dynamic record with value type depending on key suffix

Dynamic record with value type depending on key suffix

Similar Threads

Similar Threads

Similar Threads