[TypeScript] satisfies, infer

satisfies

https://engineering.ab180.co/stories/satisfies-safe-upcasting

“satisfies” 키워드는 literal (값) 이나 변수를 안전하게 upcast 하는 기능을 수행한다.

*업캐스팅
(하나의 데이터 타입을 다른 데이터 타입으로 바꾸는 형변환의 일종, 참조 자료형에서 사용되는 워딩)
: 하위 타입을 상위 타입으로 변환하는 것을 의미하는데
예를 들어 자식 클래스는 부모 클래스를 상속하고 있기 때문에 부모의 속성들을 모두 가지고 있지만,
부모 클래스는 자식 클래스의 속성들을 모두 가지고 있지 않음.

업캐스팅 : 자식 클래스가 부모 클래스 타입으로 형변환 되는 것 > 이는 기존에 있던 속성들에 비해 갯수가 적어지는 것을 의미한다 ⇒ 우리가 아래에서 보는 예시처럼

사용 예시

아래 meta 데이터는 typeof FieldSet을 제네릭으로 받은 Meta 타입을 satisfies 하고 있다.

다른 속성들이 존재하더라도 satisfies 키워드 뒤 쪽에 있는 내용들만 만족하면 타입 에러를 발생시키지 않음.

as 키워드를 사용하거나, 해당 타입을 위한 새로운 타입을 생성하지 않아도 안전하게 타입 작성이 가능.

import type { Meta, StoryObj } from '@storybook/react';
import { TextInput } from '@needer/ui/components/forms/TextInput.tsx';
import {
  FieldSet,
  FieldSetLabel,
} from '@needer/ui/components/forms/FieldSet.tsx';

const meta = {
  title: 'Components/Form/Input/FieldSet',
  component: FieldSet,
} satisfies Meta<typeof FieldSet>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Box: Story = {
  render: () => (
    <FieldSet>
      <FieldSetLabel>Label</FieldSetLabel>
      <TextInput
        placeholder="ex) value"
        $type={'box'}
        type={'text'}
      />
    </FieldSet>
  ),
};

infer

https://velog.io/@from_numpy/TypeScript-infer

infer 키워드는 제약 조건 extends가 아닌 조건부 타입 extends절에서만 사용 가능
조건부가 참인 경우에 infer 키워드 뒤 쪽이 적용된다.

//기본 사용법 예시 
T extends infer U ? X : Y

//infer 키워드로 만들어진 유틸리티 타입
type ReturnType<T extends (...args : any) => any> = T extends (...args : any) => infer R ? R : any;

function fn(num : number) {
  return num.toString(); 
}

const a : ReturnType<typeof fn> = "Hello";