javascript - Definer grensesnitt ved hjelp av et array av verdier

Hvis jeg har en konstant med input-egenskaper og en funksjon som returnerer input-IDene og standardverdien, slik:

const Inputs = [{label: "myInput1", id: "myId1"}, {label: "myInput2" , id: "myId2" }]
    
const getInputValues = () => Inputs.reduce( (acc, item) => ({...acc, [item.id] : 123  }), {} )

Hvordan kan jeg definere returtypen til getInputValues i TypeScript?

Kode

Svar #1

Den eneste måten jeg kunne komme på er å bruke const-assertion for din Inputs-konstant:

const Inputs = [
  {label: "myInput1", id: "myId1"},
  {label: "myInput2", id: "myId2"},
] as const;

type InputIds = typeof Inputs[number]['id'];

function getInputValues(): Record<InputIds, number> {
  return Inputs.reduce((acc, item) => {
    return {...acc, [item.id]: 123};
  }, {} as Partial<Record<InputIds, number>>) as Record<InputIds, number>;
}

Svar #2

Det beste du kan håpe på her er Record<string, number>.

const getInputValues = ():Record<string,number> => 
    Inputs.reduce( (acc, item) => ({...acc, [item.id] : 123  }), {})

For enda bedre typesikkerhet kan du velge Record<string, number | undefined> som vil tvinge deg til å type-sjekke alle verdier du får tilgang til.

Relaterte artikler