React) React + Typescript 프로젝트 생성 및 사용법

1.  프로젝트 생성

npx create-react-app <appname> --template=typescript
cd appname
npm start

tsx 파일로 프로젝트가 생성된다.

 

2. state에 타입 정의하기

const [state, setState] = useState<"type">(초기값);

typescript + react 카운터 예제

다른 값을 입력할 경우 typescript 에러가 난다.

 

3. props에 타입 정의하기

type PropsType = {
    props1: string,
    props2: number,
    ...
}

const Component = (props: PropsType) => { ...

props에 타입 정의 예제

받을 props를 직접 명시해준 모습

지정한 타입대로 값을 전달하지 않으면 에러가 발생한다.