TypeScript

- TypeScript : JavaScript와 100% 호환되는 정적 타입 언어로 바벨을 통해 JavaScript 코드로 변환(확장자를 .js -> .ts로 변환해 컴파일 하기 때문에)

const fromOptions = [
  { value: '', text: '자금 출처을 선택해주세요.' },
  { value: '11', text: '근로소득' },
  { value: '12', text: '사업소득' },
  { value: '13', text: '연금소득' },
  { value: '14', text: '부동산 임대소득' },
  { value: '15', text: '부동산 등 양도소득' },
  { value: '16', text: '금융소득' },
  { value: '17', text: '상속/증여' },
  { value: '18', text: '퇴직소득' },
  { value: '99', text: '기타목적(직접입력)' }
];

export default function WrapElement({ changeModal, changeInitValue }: IWrapElement): React.ReactElement {
	...
    return (
	<InputElement
        name={'nFrom'}
        label={'자금출처'}
        errMsg={'국적을 선택해주세요.'}
        options={fromOptions}
        inputType={'select'}
        changeInitValue={changeInitValue}></InputElement>)
}

interface IInputElement {
  name: string;
  label: string;
  errMsg: string;
  inputType: string;
  isYN?: boolean;
  options?: { value: string; text: string }[]; // 객체 배열
  checkValue?(bool: boolean): void; // 함수
  changeModal?(bool: boolean): void;
  changeInitValue(event: React.ChangeEvent): void; 
}

export default function InputElement({
  name,
  label,
  errMsg,
  inputType,
  isYN,
  options,
  checkValue,
  changeModal,
  changeInitValue
}: IInputElement): React.ReactElement {
	const decideElement = (type: string) => {
      ...
      return (
        <select name={name} title={label} onChange={(e) => changeInput(e)} defaultValue="">
                  {options?.map((element) => (
                    <option key={element.value} value={element.value}>
                      {element.text}
                    </option>
                  ))}
        </select>)
}

---

export default function Sample2(): React.ReactElement {
  const [isOpen, setModal] = useState(false);
  const [initValue, setInitValue] = useState({
    name: '',
    eName: '',
    country: '',
    address: '주소',
    job: '직업',
    frgnNo: '',
    phNo: '',
    isReal: 'Y',
    nName: 'ㅏ',
    nEName: 'k',
    nPsnlNo: '00',
    nCountry: '2',
    nPurpose: '99',
    nFrom: '99'
  });
  const [isReady, setReady] = useState(false);

  const changeInitValue = (event: React.ChangeEvent) => {
    const { value, name } = (event.target as HTMLInputElement) || HTMLSelectElement;
    setInitValue({ ...initValue, [name]: value }); // spread 사용 시 tuple type으로 반환되므로 객체를 넘겨주려면 감싸주어야함
  };

  useEffect(() => {
    console.log('useEffect()');

    if (validation({ validationTarget: initValue })) { // 여기서 validation(initValue)로만 넘겨주면 
    // Type '{ name: string; eName: string; country: string; address: string; job: string; frgnNo: string; 
    // phNo: string; isReal: string; nName: string; nEName: string; nPsnlNo: string; nCountry: string; 
    // nPurpose: string; nFrom: string; }' has no properties in common with type 'IValidation'.ts(2559)
    // 에러가 뜸. 객체 안 넘겨주는 key값과 value를 매칭 시켜서 넘겨주어야 오류 없음.
      console.log('setReady(true)');
      setReady(true);
    } else {
      console.log('setReady(false)');
      setReady(false);
    }
  }, [initValue]);

  return (
    <Wrapper>
      <TitleBar></TitleBar>
      <WrapElement
        changeModal={(bool) => setModal(bool)}
        changeInitValue={(event) => changeInitValue(event)}></WrapElement>
      <BottomButton isReady={isReady}></BottomButton>
      {isOpen && <Modal changeModal={(bool) => setModal(bool)}></Modal>}
    </Wrapper>
  );
}

interface IValidation {
  validationTarget?: {
    name: string;
    eName: string;
    country: string;
    address: string;
    job: string;
    frgnNo: string;
    phNo: string;
    isReal: string;
    nName: string;
    nEName: string;
    nPsnlNo: string;
    nCountry: string;
    nPurpose: string;
    nFrom: string;
  };
}

export default function validation({ validationTarget }: IValidation): boolean {
	...
}