[TypeScript] React component를 알려주자

 

TypeScript에게 React component를 설명하는 방법

Prop Types는 prop이 있는지 없는지 확인해주지만 코드를 실행한 다음에야 확인이 가능하다.

코드 실행하기 전에 확인하기 위해 Prop Types를 이용하지 않고 prop들을 TypeScript로 보호해주도록 하겠다.

 

TypeScript와 props

interface

interface를 이용하여 object 모양을 typescript에게 설명해주어 component의 props에 타입을 알려준다.

interface Players {
	name: string;
    age: number;
    score: number;
}

const profile = (playerObj: Players) => {
	`${playerObj.name}. ${playerObj.age} years old. Total score is ${playerObj.score}.`
}

 

TypeScript와 State

const [value, setValue] = useState(1);
setValue(true);

만약 타입스크립트에서 위와 같은 코드를 작성하면 당연하게 오류메세지를 내보낼 것이다..ㅎㅎ;;

당연하게도 state를 만들면 타입은 변하지 않기 때문에 저런 일은 거의 없을테지만 

진짜 극극극극소수의 경우로 string으로 시작해서 number로 끝나는 경우엔 맞춤 제작이 가능하다

const [value, setValue] = useState<string|number>(1);
setValue(true);

 

TypeScript와 Form

기존처럼 onChange 함수를 만들어주었는데 event에 오류가 생기는 것을 확인할 수 있다. any Types 란다

any type은 어떤 형식이든 가능하다는 의미로 기본적으로 Javascript 방식인데 Typescript에게는 딱히 좋지 않은 타입이다.

const onChange=(event:React.FormEvent<HTMLInputElement>)=>{
	setvalue(event.currentTarget.value);
}

React.FormEvent<HTMLInputElement>를 이용하여 타입을 설정하여주었다.

사실 너무나도 많아서 기억할 필요는 없고 구글링만이 답인 것 같다..ㅎㅎ

 

추가내용) event.target ? vs event.currentTarget?

event.target은 자식 요소를 리턴하고, event.currentTarget은 부모 요소를 반환하는 차이가 있다.

 

마찬가지로, onSubmit도 구현해보자

const onSubmit =(event: React.FormEvent<HTMLFormElement>)=>{
	event.preventDefault();
    alert(`Hello! ${value}`);
}