[TS] TypeScript 타입스크립트 satisfies 연산자

타입스크립트 4.9 버전부터 안전한 *업캐스팅을 지원하는 satisfies 연산자를 사용할 수 있다. satisfies 연산자를 활용하면 타입을 변경하지 않고도 변수에 *제약 조건(constraint)을 적용할 수 있다. 즉, 객체 프로퍼티에 제약 조건을 적용하면서 각 프로퍼티의 타입을 올바르게 추론할 수 있다.

 

💡 용어 설명

• 캐스팅 : 타입 변환
• 업캐스팅 : 자식 클래스를 부모 클래스 타입으로 캐스팅 (상위 타입으로 변환)
• 다운캐스팅 : 부모 클래스를 자식 클래스 타입으로 캐스팅 (하위 타입으로 변환)
• 제약 조건 : 특정 타입이나 구조를 강제하여 코드의 안정성과 일관성을 보장하는 방법

 

문제

---

아래 참가자 정보를 나타내는 attendee 객체가 있다. 객체를 선언하면 타입스크립트는 객체의 각 프로퍼티 타입을 자동으로 추론한다.

 

그래서 attendee.age(number 타입으로 추론)에 숫자를 더하거나 attendee.name(string 타입으로 추론)에 toUpperCase 같은 메서드를 사용할 수 있다. 하지만 attendee 객체가 어떤 프로퍼티로 구성돼 있는지 구체적으로 명시하지 않아서(제약 조건 없음) posittion 같은 오타가 생겨도 에러가 발생하지 않는다.

// attendee: { name: string; age: number; posittion: string; }
const attendee = {
  name: 'Smith',
  age: 30,
  posittion: 'Engineer', // 오타
};

const plusAge = attendee.age + 10; // OK (number 타입으로 추론)
const nameToUpperCase = attendee.name.toUpperCase(); // OK (string 타입으로 추론)

 

타입 어노테이션(타입 표기)을 사용하면 위 같은 오타를 사전에 방지할 수 있다. 하지만 객체의 각 프로퍼티가 어떤 타입을 가지는지에 대한 정보를 잃게 된다. 결국 attendee 객체의 모든 프로퍼티는 string | number 유니온 타입을 갖게 된다.

type Attendee = 'name' | 'age' | 'position';

const attendee: Record<Attendee, string | number> = {
  name: 'Smith',
  age: 30,
  posittion: 'Engineer', // Error! 오타 감지
};

const plusAge = attendee.age + 10; // Error! ts(2365)
const nameToUpperCase = attendee.name.toUpperCase(); // Error! ts(2339)

 

때문에 attendee.age에 10을 더하면 string | number 타입에 + 연산자를 사용할 수 없다고 나온다. 마찬가지로 attendee.name에 toUpperCase를 사용하면 string | number 타입에 toUpperCase 속성이 없다는 에러가 발생한다.

 

해결

---

위 같은 문제는 satisfies 연산자를 사용하면 해결할 수 있다. 그럼 attendee 객체 프로퍼티를 Attendee 타입으로 제한하면서(제약 조건 적용), 각 프로퍼티의 타입을 올바르게 추론할 수 있다.

type Attendee = 'name' | 'age' | 'position';

const attendee = {
  name: 'Smith',
  age: 30,
  posittion: 'Engineer', // Error! 오타 감지
} satisfies Record<Attendee, string | number>;

const plusAge = attendee.age + 10; // OK (number 타입으로 추론)
const nameToUpperCase = attendee.name.toUpperCase(); // OK (string 타입으로 추론)

 

예시 — unknown

unknown 키워드를 사용했을 때도 프로퍼티 타입을 올바르게 추론한다. satisfies 연산자를 사용하지 않으면 각 프로퍼티 값을 사용할 때마다 타입 단언/가드 작업을 해줘야 한다.

type Attendee = 'name' | 'age' | 'position';

const attendee = {
  name: 'Smith',
  age: 30,
  posittion: 'Engineer', // Error! 오타 캐치
} satisfies Record<Attendee, unknown>;

const plusAge = attendee.age + 10; // OK
const nameToUpperCase = attendee.name.toUpperCase(); // OK

 

 

예시 — 튜플

프로퍼티 값이 튜플(배열 각 요소의 타입이 이미 정해져 있는 형식)일 때도 잘 작동한다. 아래 예시에서 RGB 타입은 [number, number, number] 지만, blue 프로퍼티의 값은 [number, number] 타입이므로 에러가 발생했다.

// 코드 참고 via 공식 문서
type RGB = [red: number, green: number, blue: number];

const palette = {
  red: [255, 0, 0],
  green: '#00ff00',
  blue: [0, 0], // Error! ts(2322)
} satisfies Record<string, string | RGB>;

const redComponent = palette.red.at(0); // OK
const greenNormalized = palette.green.toUpperCase(); // OK

 

예시 — as const 키워드와 함께 사용하기

satisfies 연산자는 as const 키워드와 함께 사용할 수 있다. as const 키워드를 사용하면 객체의 모든 프로퍼티가 readonly로 변경되고 할당된 리터럴 값(소스 코드에 직접 입력한 고정된 값)으로 프로퍼티 타입을 추론한다. 따라서 palette 객체 프로퍼티 값에 적용한 RGB 타입에도 readonly 키워드를 붙여줘야 한다.

type RGB = readonly [red: number, green: number, blue: number];

const palette = {
  red: [255, 0, 0],
  green: '#00ff00',
  blue: [0, 0, 0],
} as const satisfies Record<string, string | RGB>;

 

as const 키워드를 사용하지 않으면 red 프로퍼티는 [number, number, number] 타입을 가진다

 

예시 — as Type vs satisfies 비교

type Action = {
  label: string;
  onClick?: () => void;
  color?: 'primary';
  variant?: 'outlined' | 'contained';
};

const actions = [
  { label: 'No', onClick: closeModal, variant: 'outlined' },
  { label: 'Yes', onClick: onConfirm, variant: 'contained' },
] satisfies Action[];

• as Action[] 타입 단언을 사용하면 프로퍼티 이름에 오타(variants 등)가 있어도 잡아내지 못한다
• 타입 단언을 사용하지 않을 경우 variant 프로퍼티 값 타입을 항상 string으로 추론한다
• satisfies를 사용하면 프로퍼티 이름의 오타를 잡아내고, 각 프로퍼티 값의 타입 정보도 유지할 수 있다

 

레퍼런스

---

• [번역] TypeScript 4.9
• TypeScript 4.9 'satisfies' operator to ensure expression matches some type
• satisfies: 안전한 업캐스팅 (TypeScript 4.9) | GeekNews
• TypeScript 4.9: satisfies operator  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요