Typescript array object property value as type

Question

Is it possible to use values of an array of object as a type?

// this array is static
export const events = [
    {
        id: 1,
        key: 'clickedButton',
    },
    {
        id: 2,
        key: 'clickedLink',
    },
    {
        id: 3,
        key: 'clickedImage',
    },
] as const;

type Keys = //<-- How do I get this to : "clickedButton" | "ClickedLink" | "ClickedImage"

const dispatchEvent(key: Keys) => {
    const event = events.find(e => e.key === key);
    ...
}

I tried this

const keys = events.map((e) => e.key);

type Keys = typeof keys.values;

equals

() => IterableIterator<"clickedButton" | "ClickedLink" | "ClickedImage">

which doesnt work when I try to use .find() after

Is it simply impossible?

Nenad · Accepted Answer · 2020-04-20 16:39:44Z

11

You can use:

type Keys = typeof events[number]["key"]; // "clickedButton" | "clickedLink" | "clickedImage"

answered Apr 20, 2020 at 16:39

Nenad

27k11 gold badges81 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BitOfUniverse Over a year ago

use as const satisfies readonly <your_type_here> to verify the type when assigned a const. satisfies was added in TS 4.9

Eugene Karataev · Accepted Answer · 2020-04-20 16:35:39Z

2

A possible solution is to refactor your code with enums.

enum Keys {
    clickedButton = 'clickedButton',
    clickedLink = 'clickedLink',
    clickedImage = 'clickedImage'
}

// this array is static
export const events = [
    {
        id: 1,
        key: Keys.clickedButton,
    },
    {
        id: 2,
        key: Keys.clickedLink,
    },
    {
        id: 3,
        key: Keys.clickedImage,
    },
] as const;

const dispatchEvent = (key: Keys) => {
    const event = events.find(e => e.key === key);
}

answered Apr 20, 2020 at 16:35

Eugene Karataev

1,9811 gold badge16 silver badges24 bronze badges

Collectives™ on Stack Overflow

Typescript array object property value as type

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related