keyof typeof obj
const fruits = {
apple:"사과",
banana: "바나나",
blueberry: "블루베리"
}
type Fruit = keyof typeof fruits; // 'apple' | 'banana' | 'blueberry'
const [fruit, changeFruit] = useState<Fruit | undefined>('apple');
// 에러 발생
const func = () => {
changeFruit("orange");
}
Select를 사용하는 입장에서 제한된 키(key)와 값(value)만을 가지도록 하려면 어떻게 해야 할까?
함수 컴포넌트 역시 함수이므로 제네릭을 사용한 컴포넌트를 만들 수 있다.
interface SelectProps<OptionType extends Record<string, string>> {
options: OptionType;
selectedOption?: keyof OptionType;
onChange?: (selected?: keyof OptionType) => void;
}
const Select = <OptionType extends Record<string, string>>({
options,
selectedOption,
onChange,
}: SelectProps<OptionType>) => {
// Select component implementation
};
Select 컴포넌트에 전달되는 props의 타입 기반으로 타입이 추론되어 <Select<추론된_타입>> 형태의 컴포넌트가 생성된다. 이제 FruitSelect에서 잘못된 selectedOption을 전달하면 타입 에러가 발생한다.
const fruits = {
apple: "사과",
banana: "바나나",
blueberry: "블루베리"
}
const FruitSelect: VFC = () => {
}