[TypeScript] 객체의 배열에서 특정 키의 모든 밸류를 union type으로 추출하기

📍예시

- 아래처럼 객체로 이루어진 배열이 있다. name필드의 모든 value를 union type으로 받으려면 어떻게 해야할까?

 

// 뽑아내고 싶은 타입
// "javascript" | "typescript" | "react" | "vue" | "svelte" | "nextjs" | "nestjs" | "nodejs" | "java" | "spring" | "go"

// 데이터
const SKILL_LIST = [
  {
    name: "JavaScript",
    value: "javascript",
  },
  {
    name: "TypeScript",
    value: "typescript",
  },
  {
    name: "React",
    value: "react",
  },
  {
    name: "Vue.js",
    value: "vue",
  },
  {
    name: "Svelte",
    value: "svelte",
  },
  {
    name: "Next.js",
    value: "nextjs",
  },
  {
    name: "NestJS",
    value: "nestjs",
  },
  {
    name: "Node.js",
    value: "nodejs",
  },
  {
    name: "Java",
    value: "java",
  },
  {
    name: "Spring",
    value: "spring",
  },
  {
    name: "Go",
    value: "go",
  },
];

 

📍 typeof 키워드와 number 프로퍼티 사용하기

- as const 를 붙여주지 않으면 그냥 string이 된다

- 배열의 원소를 찾을 것이기 때문에 number 타입으로 인덱스를 지정해주고, 원하는 키값을 넣어주면 된다

 

const SKILL_LIST = [
  {
    name: "JavaScript",
    value: "javascript",
  },
  {
    name: "TypeScript",
    value: "typescript",
  },
  {
    name: "React",
    value: "react",
  },
  {
    name: "Vue.js",
    value: "vue",
  },
  {
    name: "Svelte",
    value: "svelte",
  },
  {
    name: "Next.js",
    value: "nextjs",
  },
  {
    name: "NestJS",
    value: "nestjs",
  },
  {
    name: "Node.js",
    value: "nodejs",
  },
  {
    name: "Java",
    value: "java",
  },
  {
    name: "Spring",
    value: "spring",
  },
  {
    name: "Go",
    value: "go",
  },
] as const;

// "javascript" | "typescript" | "react" | "vue" | "svelte" | "nextjs" | "nestjs" | "nodejs" | "java" | "spring" | "go"
type a = typeof SKILL_LIST[number]["value"]