[ReactJS] TypeScript

TypeScript는 JS 기반의 (거의 똑같은) 다른 언어

JS와의 차이점

strongly-typed: 변수의 자료형을 꼼꼼히 따진다. c처럼.
a:number, b:string과 같이 자료형을 정의한다.
없는 변수를 호출할 때도 막아준다.(JS는 undefined로 내보냄)

설치

npx create-react-app my-app typescript
또는
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

JS 기준 라이브러리들이 인식 불가능할 때가 있다. 그럴 때는 다음을 시도해본다.
npm i --save-dev @types/라이브러리 이름
(안될 수도 있다..)

@types 는 엄청 큰 깃허브 라이브러리이다. 간단하게 JS에 맞추어진 것을 TS 기준으로 변형하는 것.

props

기본 형태

const plus = (a:number, b:number) => a + b;
데이터 타입을 정의하는 가장 기본의 형태이다.
protection은 프로그램이 런하기 전에 실행되므로 실제로 브라우저가 받는 코드는 일반 JS 코드이다.
prop이 누락되었거나 없을 때도 알려준다.

Interface

interface: object shape에 대한 설명 모음.

interface CircleProps {
  bgColor: string;
  borderColor?: string;
  text?: string;
}
//bgColor는 필수 값, borderColor와 text는 Optional이다.

function Circle({ bgColor, borderColor, text = "default text" }: CircleProps) {
  return (
    <Container bgColor={bgColor} borderColor={borderColor ?? bgColor}>
//default 값도 설정이 가능하다.
      {text}
    </Container>
  );
}

CircleProps에서 bgColor가 문자열임을 알리고 이를 사용하는 Container와 Circle 함수에 규칙을 적용한다.
Optional은 undefined일 수 있다는 뜻이다.
그런데 Container의 경우, 예제에 나오지 않았지만 borderColor를 요한다. Circle에 적용되는 CircleProps가 Optional인 것과 상관없이 필요로 하므로, ??를 사용해 default 값을 설정한다.

특이한 경우

State

useState는 default값에 맞추어 자료형이 정해진다. 예를 들어 숫자일 경우(ex. usestate(1)) 자연스럽게 number 형으로 단정.

마음에 안들면 const [value, setValue] = useState<string|number>("");와 같이 수정할 수 있다. (문자열과 숫자 가능)

Form

const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
      //JS에서의 Target과 같음
    } = event;
    setValue(value);
  };
  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log("hello", value);
  };

Form에서의 event는 다음과 같이 React.FormEvent<HTMLFormElement>의 형태로 작성한다.
딱히 규칙이 있거나 한 건 아니고 syntheticEvent 등에서 구글링 해서 그때그때 찾아볼 것.