[TypeScript] Literal type, keyof, typeof

Literal types

리터럴 유형은 string, number보다 구체적인 유형이다.

예를 들어 'hello'는 문자열이지만 문자열은 'hello'가 아니다.
'hello'는 보다 구체적인 유형의 문자열로, 리터럴 형식이 될 수 있다.

type Greeting = "Hello"

즉, 타입Greeting 은 Hello 값만 가질 수 있고, 다른 유형의 값은 가질 수 없다.

let greeting: Greeting
greeting = "Hello" // OK 
greeting = "Hi"  // ❌

리터럴 유형은 그 자체로는 유용하지 않지만 union types, type aliases, type guards 와 결합하면 강해진다.

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

이제 Greeting은 "Hello" 또는 "Hi 또는 "Welcome"값을 가질 수 있게 된다.

그냥 type을 string으로 지정하는 것보다 강력하게 방어할 수 있다.

 let greeting: Greeting
greeting = "Hello"       // OK
greeting = "Hi"          // OK
greeting = "Welcome"     // OK
greeting = "GoodEvening" // ❌

ketof only

ketof는 개체 형식을 취하며, 키의 문자열 또는 숫자 리터럴 조합을 생성한다.
객체의 유형을 제공

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

type SomeNewType = keyof Person

let newTypeObject: SomeNewType
newTypeObject = "name"           // OK
newTypeObject = "age"            // OK
newTypeObject = "location"       // OK
newTypeObject = "anyOtherValue"  // ❌

SomeNewType은 "name" | "age" | "location" 유형의 속성으로 만들어진 문자 형식의 결합이다.

object에 keyof typeof 쓰기

우리가 object의 종류를 모르거나, type이 지정되지 않은 경우, keyof typeof 를 쓸 수 있다.

const person = {
name  : "sally",
age :  100
}

type personType  = keyof typeof person

let personDivision : personType

personDivision = "name"  // OK
personDivision = "age"  // OK
personDivision = "address" // ❌

keyof typeof enum

TypeScript에서 enum은 상수에 대한 형식 안전을 달성하기 위해 컴파일 시 형식으로 사용되지만 런타임에는 객체로 처리된다.
이는 타입스크립트 코드가 자바스크립트로 컴파일되면 플레인 객체로 변환되기 때문이다.

enum ColorsEnum {
    white = '#ffffff',
    black = '#000000',
}

type Colors = keyof typeof ColorsEnum

let colorLiteral: Colors
colorLiteral = "white"  // OK
colorLiteral = "black"  // OK
colorLiteral = "red"    // ❌

여기서 ColorsEnum은 유형이 아닌 런타임에 object로 존재한다.
따라서 다음 코드에 표시된 것처럼 'key of' 'type of' 연산자를 함께 호출해준다.

https://stackoverflow.com/questions/55377365/what-does-keyof-typeof-mean-in-typescript