Using a prop of an object as a key on another object in TS

Question

I’m trying to export an object with my valid types and create a type based on that. So far so good, the problem is the interface that expects a string but is not accepting the object prop (which is a string) as valid.

export const SortValues = {
  NEWER: 'NEWER',
  OLDER: 'OLDER',
  NAME_ASC: 'NAME_ASC',
  NAME_DESC: 'NAME_DESC',
}

interface Option<T = string> {
  key: T;
  value: string;
}

type SortValuesType = keyof typeof SortValues;

// type SortValuesType = 'NEWER' | 'OLDER' | 'NAME_ASC' | 'NAME_DESC'; // Não funciona também.

export const options: Array<Option<SortValuesType>> = [
  { key: SortValues.NEWER, value: 'Mais novos' },
  { key: SortValues.OLDER, value: 'Mais antigos' },
  { key: SortValues.NAME_ASC, value: 'A - Z' },
  { key: SortValues.NAME_DESC, value: 'Z - A' },
];

I’m getting the bug "Type 'string' is not assignable to type '"NEWER" | "OLDER" | "NAME_ASC" | "NAME_DESC"'." in the key property of options.

It works if I declare Sortvalues as an Enum, since it is causing me problems elsewhere, so I really wanted to export the valid options as an object.

Here’s a snippet with the code in question. https://codesandbox.io/s/fqide

Answer 1

The problem is you’re declaring SortValues as an online object and is trying to use its properties as types.

I think what you’re looking for is an enumeration, documented here and here.

In the documentation is written:

...when all members of an enumeration have literal values, a special semantics is applied.

The first is that Enum members also become types! By example, we can say that certain members may have only the value of an Enum member...

Which in my view fits what you’re trying to do.

// Não é mais um objeto agora é uma enumeração
export enum SortValues {
  NEWER = 'NEWER',
  OLDER = 'OLDER',
  NAME_ASC ='NAME_ASC',
  NAME_DESC = 'NAME_DESC',
}

// A chave teve o tipo adequado para enumeração
interface Option<T = SortValues> {
  key: T;
  value: string;
}

type SortValuesType = keyof typeof SortValues;


//Agora as chaves podem ser valoradas de acordo com os membros da enumeração SortValues
export const options: Array<Option<SortValuesType>> = [
  { key: SortValues.NEWER  , value: 'Mais novos' },
  { key: SortValues.OLDER, value: 'Mais antigos' },
  { key: SortValues.NAME_ASC, value: 'A - Z' },
  { key: SortValues.NAME_DESC, value: 'Z - A' },
];

---

PS: I don’t know exactly what you’re doing but I think this fragment:

type SortValuesType = keyof typeof SortValues;

export const options: Array<Option<SortValuesType>> = [
  { key: SortValues.NEWER  , value: 'Mais novos' },
  { key: SortValues.OLDER, value: 'Mais antigos' },
  { key: SortValues.NAME_ASC, value: 'A - Z' },
  { key: SortValues.NAME_DESC, value: 'Z - A' },
];

can be simplified:

//type SortValuesType = keyof typeof SortValues;

export const options: Array<Option> = [
  { key: SortValues.NEWER  , value: 'Mais novos' },
  { key: SortValues.OLDER, value: 'Mais antigos' },
  { key: SortValues.NAME_ASC, value: 'A - Z' },
  { key: SortValues.NAME_DESC, value: 'Z - A' },
];