[8장] JSX에서 TSX로

// 함수 선언을 사용한 방식
function Welcome(props: WelcomeProps): JSX.Element {}
 
// 함수 표현식을 사용한 방식 - React.FC 사용
const Welcome: React.FC<WelcomeProps> = ({ name }) => {};
 
// 함수 표현식을 사용한 방식 - React.VFC 사용
const Welcome: React.VFC<WelcomeProps> = ({ name }) => {};
 
// 함수 표현식을 사용한 방식 - JSX.Element를 반환 타입으로 지정
const Welcome = ({ name }: WelcomeProps): JSX.Element => {};

// example 1
type WelcomeProps = {
    children: '천생연분' | '더 귀한 분' | '귀한 분' | '고마운 분';
};
 
// example 2
type WelcomeProps = { children: string };
 
// example 3
type WelcomeProps = { children: ReactElement };

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
    type: T;
    props: P;
    key: Key | null;
}

interface IconProps {
    size: number;
}
 
interface Props {
    // ReactElement의 props 타입으로 IconProps 타입 지정
    icon: React.ReactElement<IconProps>;
}
 
const Item = ({ icon }: Props) => {
    // icon prop으로 받은 컴포넌트의 props에 접근하면, props의 목록이 추론된다
    const iconSize = icon.props.size;
 
    return <li>{icon}</li>;
};

declare global {
    namespace JSX {
        interface Element extends React.ReactElement<any, any> {}
    }
}

type ReactText = string | number;
type ReactChild = ReactElement | ReactText;
type ReactFragment = {} | Iterable<ReactNode>;
 
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 
type ButtonProps = {
    onClick?: NativeButtonProps['onClick'];
};
 
// 또는 아래와 같이도 할 수 있다.
 
const Button = (props: NativeButtonProps) => {
    return <button {...props}>버튼</button>;
};

type NativeButtonType = React.ComponentPropsWithoutRef<'button'>;
type ButtonProps = {
    onClick?: NativeButtonType['onClick'];
};

// 함수 컴포넌트, ref에 기대한 값이 할당되지 않음
function Button(ref: NativeButtonProps['ref']) {
    const buttonRef = useRef(null);
 
    return <button ref={buttonRef}>버튼</button>;
}

// forwardRef를 사용해 ref를 전달받을 수 있도록 구현
const Button = forwardRef((props, ref) => {
    return (
        <button ref={ref} {...props}>
            버튼
        </button>
    );
});
 
// buttonRef가 Button 컴포넌트의 button 태그를 바라볼 수 있다
const WrappedButton = () => {
    const buttonRef = useRef();
 
    return (
        <div>
            <Button ref={buttonRef} />
        </div>
    );
};

type NativeButtonType = React.ComponentPropsWithoutRef<'button'>;
 
// forwardRef의 제네릭 인자를 통해 ref에 대한 타입으로 HTMLButtonElement를, props에 대한 타입으로 NativeButtonType을 정의했다
const Button = forwardRef<HTMLButtonElement, NativeButtonType>((props, ref) => {
    return (
        <button ref={ref} {...props}>
            버튼
        </button>
    );
});

/**
* Select 컴포넌트
* @param {Object} props - Select 컴포넌트로 넘겨주는 속성
* @param {Object} props.options - { [key: string]: string } 형식으로 이루어진 option 객체
* @param {string | undefined} props.selectedOption - 현재 선택된 option의 key값 (optional)
* @param {function} props.onChange - select 값이 변경되었을 때 불리는 callBack 함수 (optional)
* @returns {JSX.Element}
*/
const Select = //...

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
};
 
const fruits = { apple: '사과', banana: '바나나', blueberry: '블루베리' };
 
const FruitSelect: VFC = () => {
    // ...
    // <Select<Fruit> ... />으로 작성해도 되지만, 넘겨주는 props의 타입으로 타입 추론을 해줍니다
    // Type Error - Type "orange" is not assignable to type "apple" | "banana" | "blueberry" | undefined
 
    return <Select options={fruits} onChange={changeFruit} selectedOption='orange' />;
};

type ReactSelectProps = React.ComponentPropsWithoutRef<'select'>;
 
interface SelectProps<OptionType extends Record<string, string>> {
    id?: ReactSelectProps['id'];
    className?: ReactSelectProps['className'];
    // ...
}

// 모든 유저(회원, 비회원)은 id를 갖고 있음
interface User {
    id: string;
}
 
interface Member extends User {
    nickName: string;
}
 
let users: Array<User> = [];
let members: Array<Member> = [];
 
users = members; // OK
members = users; // Error
 
type PrintUserInfo<U extends User> = (user: U) => void;
 
let printUser: PrintUserInfo<User> = user => console.log(user.id);
 
let printMember: PrintUserInfo<Member> = user => {
    console.log(user.id, user.nickName);
};
 
printMember = printUser; // OK.
printUser = printMember; // Error - Property 'nickName' is missing in type 'User' but required in type 'Member'.

interface Props<T extends string> {
    onChangeA?: (selected: T) => void;
    onChangeB?(selected: T): void;
}