Javascript & Typescript

TypeScript의 keyof와 typeof로 타입 안전성 강화하기

0

TypeScript는 자바스크립트에 정적 타입 검사를 추가하여 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있게 해줍니다. 이 중에서도 `keyof`와 `typeof` 키워드는 객체 타입의 키를 다룰 때 매우 유용하게 사용됩니다. 이번 기사에서는 `keyof`와 `typeof`의 개념과 사용법을 설명하고, 이를 통해 타입 안전성을 강화하는 방법을 구체적인 예시를 통해 살펴보겠습니다.

1. typeof 연산자

TypeScript에서 `typeof` 연산자는 JavaScript에서 사용되는 `typeof`와 유사하게 작동하지만, 타입 시스템에서 타입을 가져오는 데 사용됩니다. 이는 변수나 객체의 타입을 가져와서 다른 곳에서 사용할 수 있게 합니다. 예를 들어:

const example = { a: 1, b: 2, c: 3 };
type ExampleType = typeof example;
// ExampleType은 { a: number; b: number; c: number; } 타입을 가집니다.

위 예제에서 `ExampleType`은 `example` 객체의 타입을 반영하게 됩니다. 이로써 객체의 구조를 타입으로 활용할 수 있게 됩니다.

2. keyof 연산자

`keyof` 연산자는 주어진 타입의 모든 키를 문자열 리터럴 유니온 타입으로 변환합니다. 이는 객체 타입의 모든 키를 추출하여 타입으로 사용할 때 매우 유용합니다. 예를 들어:

type ExampleKeys = keyof ExampleType;
// ExampleKeys는 "a" | "b" | "c" 타입을 가집니다.

위 예제에서 `ExampleKeys` 타입은 `ExampleType`의 키인 `”a”`, `”b”`, `”c”`를 유니온 타입으로 가집니다.

3. keyof와 typeof의 결합

이제 `keyof`와 `typeof`를 결합하여 객체의 키 타입을 동적으로 정의하는 방법을 살펴보겠습니다. 이는 타입 안전성을 강화하고 코드의 유연성을 높이는 데 매우 유용합니다.

const systemColor = {
    red: '#FF0000',
    green: '#00FF00',
    blue: '#0000FF'
};

export type SystemcolorKeyType = keyof typeof systemColor;
// SystemcolorKeyType은 "red" | "green" | "blue" 타입을 가집니다.

위 예제에서 `SystemcolorKeyType` 타입은 `systemColor` 객체의 키 중 하나일 수 있는 문자열 리터럴 타입으로 정의됩니다. 이는 TypeScript가 해당 키들 중 하나만 올바른 값으로 인식하게 합니다.

4. 실용적인 예제

이제 이를 활용한 실용적인 예제를 살펴보겠습니다. 특정 색상을 받아 그에 해당하는 값을 반환하는 함수를 정의한다고 가정해보겠습니다.

const systemColor = {
    red: '#FF0000',
    green: '#00FF00',
    blue: '#0000FF'
};

export type SystemcolorKeyType = keyof typeof systemColor;

function getColorCode(color: SystemcolorKeyType): string {
    return systemColor[color];
}

// 올바른 예시
console.log(getColorCode('red'));   // "#FF0000"
console.log(getColorCode('green')); // "#00FF00"
console.log(getColorCode('blue'));  // "#0000FF"

// 잘못된 예시 (컴파일 오류 발생)
console.log(getColorCode('yellow')); // Error: Argument of type '"yellow"' is not assignable to parameter of type 'SystemcolorKeyType'.

이 함수는 `SystemcolorKeyType` 타입을 인수로 받아서 `systemColor` 객체에서 해당 색상의 값을 반환합니다. 잘못된 색상 키를 입력하면 컴파일 시점에서 오류가 발생하여 개발자가 실수를 미리 방지할 수 있습니다.

결론

TypeScript의 `keyof`와 `typeof`는 객체 타입의 키를 안전하고 유연하게 다룰 수 있게 해주는 강력한 도구입니다. 이를 통해 코드의 타입 안전성을 강화하고, 유지보수성을 높일 수 있습니다. 특히 대규모 프로젝트나 협업 환경에서 이러한 타입 시스템의 장점을 극대화할 수 있습니다.

TypeScript를 사용하면서 `keyof`와 `typeof`를 적절히 활용하면, 코드의 안정성과 가독성을 크게 향상시킬 수 있습니다. 앞으로 프로젝트를 진행할 때 이 두 연산자를 적극적으로 활용해보시기 바랍니다.

Leave a Reply