Retrieving the types of all ids from an object

Question

Retrieving the types of all ids from an object

I have a collection as follows:

var myData = [{ id: 'a', value: 1}, { id: 'b', value: 2 }, { id: 'c', value: 3}]

and I am trying to create a function that only accepts certain ids as parameters

function checkId(id: 'a' | 'b' | 'c') { /* */ }

I attempted the following:

var myData = [{ id: 'a', value: 1}, { id: 'b', value: 2 }, { id: 'c', value: 3}]

type Data = typeof myData;
type IdType = keyof Data[number]['id'];

but it resulted in the id being displayed as:

type IdType = number | typeof Symbol.iterator | "toString" | "charAt" | "charCodeAt" | "concat" | "indexOf" | "lastIndexOf" | "localeCompare" | "match" | "replace" | "search" | "slice" | ... 30 more ... | "padEnd"

typescript

Answer 1

Answer №1

To rectify the error, simply remove keyof from

type id = keyof OJ[number]['id'];

. By doing this, id will align with string. If you require a more precise type where id should be

"a" | "b" | "c"

, then add as const after the object.

function abc(id: 'a' | 'b' | 'c') { /* */ }

var myObj= [{ id: 'a', value: 1}, { id: 'b', value: 2 }, { id: 'c', value: 3 }] as const

type OJ = typeof myObj;
type id = OJ[number]['id'];
//    ^?

playground

Answer 2

To rectify the error, simply remove keyof from

type id = keyof OJ[number]['id'];

. By doing this, id will align with string. If you require a more precise type where id should be

"a" | "b" | "c"

, then add as const after the object.

function abc(id: 'a' | 'b' | 'c') { /* */ }

var myObj= [{ id: 'a', value: 1}, { id: 'b', value: 2 }, { id: 'c', value: 3 }] as const

type OJ = typeof myObj;
type id = OJ[number]['id'];
//    ^?

playground

Answer 3

Answer №2

There is no need for the keyof operator in the type id definition:

const myObj = [{ id: 'a', value: 1}, { id: 'b', value: 2 }, { id: 'c', value: 3}];

type OJ = typeof myObj;
type id = OJ[number]['id'];

But keep in mind that with this approach, the type of id will default to string, as TypeScript treats myObj as open-ended and allows for additional elements to be added later.

To avoid this, you can utilize a const assertion:

const myObj = [{ id: 'a', value: 1}, { id: 'b', value: 2 }, { id: 'c', value: 3}] as const;

type OJ = typeof myObj;
type id = OJ[number]['id'];

Answer 4

There is no need for the keyof operator in the type id definition:

const myObj = [{ id: 'a', value: 1}, { id: 'b', value: 2 }, { id: 'c', value: 3}];

type OJ = typeof myObj;
type id = OJ[number]['id'];

But keep in mind that with this approach, the type of id will default to string, as TypeScript treats myObj as open-ended and allows for additional elements to be added later.

To avoid this, you can utilize a const assertion:

const myObj = [{ id: 'a', value: 1}, { id: 'b', value: 2 }, { id: 'c', value: 3}] as const;

type OJ = typeof myObj;
type id = OJ[number]['id'];

Retrieving the types of all ids from an object

Answer №1

Answer №2

Similar questions

I encountered a function overload error while creating a component for the API service

Utilizing Vuetify in Typescript: Making Use of Data() Properties

webpack-dev-server encountered an issue: The module 'URLSearchParams' (imported as 'URLSearchParams') could not be located within the 'url' module

Accessing the Component Property from an Attribute Directive in Angular 2

Issue encountered when utilizing Next Js in conjunction with react-xarrows results in an error message stating "ReferenceError: Element is not defined"

Angular styling and form error issue

Is OnPush Change Detection failing to detect state changes?

Ways to disregard attributes passed through HTTP

Updating tooltip text for checkbox dynamically in Angular 6

Bundle multiple internal modules in typescript for easy exporting

Understanding how to infer the type of a function when it is passed as an argument

Struggling to successfully pass a function as an argument to the setTimeout method within an array in node.js using TypeScript

Name values not appearing in dropdown list

Is there a way to bypass the "Error: Another application is currently displaying over Chrome" message using Javascript or Typescript?

"Typescript: Unraveling the Depths of Nested

Defining the type of a React component class constructor in TypeScript that includes a specific static method

Unable to invoke a function in TypeScript from a Kendo template within the Kendo TreeList component

What is the best approach to re-establish a websocket connection in TypeScript?

When an email link is clicked in Angular, Internet Explorer is automatically logged out and needs to be refreshed

Angular 2 Final Router Encounters Error