React에서 TypeScript 사용

리액트 프로젝트 설치

- typescript 셋팅이 완료된 프로젝트 설치하는 방법

npx create-react-app 프로젝트명 --template typescript 

 

- 기존 프로젝트에 타입스크립트만 더하는 방법

기존 프로젝트 경로에서 터미널을 오픈하신 후 아래 명령어 입력

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

 

 

---

리액트에서 타입지정

 

1. JSX 요소 타입 지정

let 박스:JSX.Element = <div></div>

 

2. function component 타입 지정

function Profile():JSX.Element {
    return (
        <div>프로필입니다</div>
    )
}

 

3. component props 타입 지정

function App() {
    return (
        <div>
            <Profile name='민수' age='20'></Profile>
        </div>
    )
}

function Profile(props:{name:string, age: string}):JSX.Element { // 타입이 길면 타입 alias or interface로 빼도 됨
    return (
        <div>{props.name}입니다</div>
    )
}

 

4. state 타입 지정

const [user, setUser] = useState<string | null>('kim')

 

5. type assertion 문법 사용

let code: any = 123;