use object keys as type in typescript

Question

consider we have a defined/constant object like below that we want to use it's keys as a type;

const componentDetail = {
  "ejareRaf" : {
    text : "rented",
    background : "linear-gradient(0deg, rgba(243, 7, 27, 0.6), rgba(243, 7, 27, 0.6));"
  },
  "hamahangBazdid" : {
    text : "visit-set", 
    background : "rgba(13, 81, 55, 0.6)"
  },
  "onMozakere" : {
    text : "negotitaing", 
    background : "linear-gradient(0deg, rgba(217, 171, 33, 0.6), rgba(217, 171, 33, 0.6));"
  },
  "dideShod" : {
    text : "seen", 
    background : "rgba(18, 25, 33, 0.4)"
  },
  "cancelBazdid" : {
    text : "canceled", 
    background : "rgba(238, 45, 123, 0.3)"
  },
}

now I want a type deduced from object keys above like this:

"ejareRaf" | "hamahangBazdid" | "onMozakere" | "dideShod" | "cancelBazdid"

Does this answer your question? [Is it possible to use \`keyof\` operator on literals instead of interfaces?](https://stackoverflow.com/questions/41947168/is-it-possible-to-use-keyof-operator-on-literals-instead-of-interfaces) — jonrsharpe, Aug 05 '20 at 19:21
@jonrsharpe hmm, yea, but I'd spend lot of time googling and I didn't find the question; then I dived into documentation and trial error; I'd posted this question for future readers since I believe this is more google-friendly and accessible — Mechanic, Aug 05 '20 at 19:58
That's fine, it can stay as a signpost, see e.g. https://stackoverflow.blog/2010/11/16/dr-strangedupe-or-how-i-learned-to-stop-worrying-and-love-duplication/ — jonrsharpe, Aug 05 '20 at 20:04

Mechanic · Accepted Answer · 2020-08-31T09:41:01.130

0

after several trial and error I'd found it myslef:

type componentDetailKeys = keyof typeof componentDetail;

// "ejareRaf" | "hamahangBazdid" | "onMozakere" | "dideShod" | "cancelBazdid"

edited Aug 31 '20 at 09:41

answered Aug 05 '20 at 19:15

Mechanic

5,015
4
15
38

use object keys as type in typescript

1 Answers1

Linked