문자열 리터럴 타입이란? as const

TypeScript 문자열 리터럴 타입 완벽 정리

React Native로 개발하다 보면 fontWeight 같은 속성에서 타입 에러를 만나게 됩니다. 이 글에서는 문자열 타입과 문자열 리터럴 타입의 차이를 알아보겠습니다.

문제 상황

// ❌ TypeScript 에러 발생
const customStyle = {
  textStyle: {
    fontWeight: "500"  // Error: 'string' 형식은 할당할 수 없습니다
  }
};

문자열 타입 vs 문자열 리터럴 타입

1. 문자열 타입 (string)

let name: string = "철수";
name = "영희";     // ✅ OK
name = "민수";     // ✅ OK
name = "아무거나"; // ✅ OK

특징: 어떤 문자열이든 다 들어갈 수 있습니다.

2. 문자열 리터럴 타입 ("특정값")

let weight: "500" = "500";
weight = "500";  // ✅ OK
weight = "600";  // ❌ Error!
weight = "bold"; // ❌ Error!

특징: 정확히 지정된 값만 들어갈 수 있습니다.

타입 추론의 차이

// 일반 string 타입으로 추론
const fontWeight1 = "500";
// 타입: string
// "500", "600", "안녕", "123abc" 뭐든 가능

// 문자열 리터럴 타입으로 추론
const fontWeight2 = "500" as const;
// 타입: "500"
// 정확히 "500"만 가능

유니온 타입과의 조합

여러 문자열 리터럴을 조합하여 사용할 수 있습니다.

type FontWeight = "400" | "500" | "600" | "700" | "bold";

const weight1: FontWeight = "500"; // ✅ OK
const weight2: FontWeight = "300"; // ❌ Error!

React Native에서의 실제 사용 예시

React Native의 fontWeight 타입 정의:

type FontWeight = 
  | "normal" 
  | "bold" 
  | "100" 
  | "200" 
  | "300" 
  | "400" 
  | "500" 
  | "600" 
  | "700" 
  | "800" 
  | "900";

해결 방법 1: as const 사용

const customDayHeaderStylesCallback = () => {
  return {
    textStyle: {
      color: "black",
      fontWeight: "500" as const  // ✅ OK
    }
  };
};

해결 방법 2: 숫자 타입 사용

const customDayHeaderStylesCallback = () => {
  return {
    textStyle: {
      color: "black",
      fontWeight: 500  // ✅ OK
    }
  };
};

왜 이런 제한이 필요한가?

// ❌ 잘못된 값 방지
fontWeight: "medium"  // 존재하지 않는 값
fontWeight: "550"     // 지원하지 않는 값

// ✅ 허용된 값만 사용
fontWeight: "500"     // 정확한 값
fontWeight: "bold"    // 정확한 값

문자열 리터럴 타입을 사용하면 컴파일 타임에 오타나 잘못된 값을 미리 잡을 수 있어 런타임 에러를 방지할 수 있습니다.

정리

구분 문자열 타입 문자열 리터럴 타입

표현	string	"500"
허용 범위	모든 문자열	특정 값만
타입 안정성	낮음	높음
사용 예시	사용자 입력	고정된 옵션 값

핵심: 문자열 리터럴 타입은 "이 변수는 특정 문자열 값만 가질 수 있어요"라고 TypeScript에게 명확히 알려주는 기능입니다!

참고 자료

• TypeScript Handbook - Literal Types
• React Native TextStyle