TypeScript

• Javascript에 Type을 추가한 언어
• type이 맞지 않으면 컴파일이 안된다.
• Javascript가 아니므로 컴파일이 되어야 한다.
• react project를 typescript프로젝트로 만들려면 다음과 같이 프로젝트를 생성한다.
  npx create-react-app my-prj --template typescript
• 이미 존재하는 프로젝트를 typescript로 전환하는 방법
  npm install --save typescript @types/node @types/react @types/react-dom @types/jest

typescript 환경에서는 타입을 정확히 명시하거나 맞춰주어야 한다.

const [value, setValue] = useState(1);
setValue(1);  성공 
setValue("1");  실패

타입을 명시하거나 여러개를 허용하고 싶다면 다음과 같이 하면 된다.

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

Form을 사용하는 경우 onSubmit이나 onChange이벤트를 정의할때도 타입을 정확하게 명시해주어야 한다.

<div>
  <form onSubmit={_onSubmit}>
    <input value={username} type="text" onChange={_onChange} />
    <button>enter</button>
  </form>
  <h1>Hello {username}</h1>
</div>

위와 같은 코드 작성 시 javascript라면 아래와 같이 두개의 함수가 정의될것이다.

const _onSubmit = (event) => {
  event.preventDefault();
  console.log("Hello ", username);
}

const _onChange = (event) => {
  const { currentTarget: { value } } = event;
  console.log(`input: ${value}`);
  setUsername(value);
}

이를 typescript로 작성하게 되면 event type을 정확히 명시해주어야 한다.

하지만 typescript는 타입을 명시해야 하기 때문에 event의 타입을 명시해주어야 한다.
onSubmit과 onChange에서 React.FormEvent<HTMLFormElement>와 React.FormEvent<HTMLFormInputElement>가 사용되어야 한다.

const _onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  console.log("Hello ", username);
}

const _onChange = (event: React.FormEvent<HTMLInputElement>) => {
  const { currentTarget: { value } } = event;
  console.log(`input: ${value}`);
  setUsername(value);
}

타입을 지정하면 비로소 intelliSense가 동작하면서 event.preventDefault같은 함수를 쉽게 찾아서 오타없이 코딩하는데도 도움이 된다.

이벤트의 종류는 다양한데.
만일 버튼의 onClick이벤트인 경우
버튼이 Form안에 경우는 React.FormEvent<HTMLButtonElement>
form바깥에 있다면 React.MouseEvent<HTMLButtonElement>가 된다.
React에서는 이런 방식으로 이벤트를 특정지으며 다른 라이브러리들은 다른 방식을 사용한다.
React.[이벤트명][<이벤트를 발생시키는 엘리먼트>] 의 순서로 리액트에서는 특정짓는다는것을 알고 있으면 된다.

React에서 이벤트는 자바스크립트의 이벤트가 아니며 React에서 SyntheticEvent로 변환해서 사용한다.
https://reactjs.org/docs/events.html