TypeScript What does "keyof typeof" mean?

리터럴 타입과 유니온 타입을 아는가? 이 둘을 명확히 알아야 keyof typeof에 대해 설명할 수 있다.

 

1. Literal Types 

 

타입 스크립트에서 리터럴 타입은 string, number, boolean 등 타입의 더욱 구체적인 타입이다. 예를 들어, "Hello World!" 는 string 타입이지만 string 타입은 "Hello World!" 가 아니다. 즉, "Hello World!"는 더욱 구체적인 스트링 타입, 리터럴 타입이다.

 

type Greeting = "Hello"

 

Greeting은 String value로 "Hello"만을 가질 수 있는 객체이다.

 

let greeting: Greeting
greeting = "Hello" // OK
greeting = "Hi" // Error: Type '"Hi"' is not assignable to type '"Hello"'

 

리터럴 타입은 그 자체로는 유용하지 않지만 union types들과 함께 쓰일 때 굉장히 강해진다.

 

type Greeting = "Hello" | "Hi" | "Welcome"

 

이제 Greeting의 값은 여러 가지 (Hello, Hi, Welcome) 으로 사용 가능하다.

 

let greeting = Greeting
greeting = "Hello"
greeting = "Hi"
greeting = "Welcome"
greeting = "Goodbye" // Error

 

2.  keyof only

 

keyof는 리터럴 타입의 유니온이다. 

 

interface Person {
    name: string,
    age: number,
    location: string
}

 

 

type NewType = keyof Person

let newType: NewType
newType = "name"           // OK
newType = "age"            // OK
newType = "location"       // OK
newType = "anyOtherValue"  // Error

 

3. keyof typeof Together

 

위의 예시들을 보면, typeof는 타입을 반환해주며 keyof는 타입을 명시해주었기 때문에 type을 안 채로 union으로 literal type을 사용할 수 있었다. 그렇지만 아래와 같은 예시들은 어떨까?

 

const newPerson = { name: "lee", age: "100" }

type Person = keyof typeof newPerson
let person: Person
person = "name" //OK
person = "age" // OK
person = "job" // Error