Typescript 리액트와 타입스크립트 설치

터미널을 새로 오픈하여

| 기존리액트 + 타입스크립트 추가 설치 명령어

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

 

| 리액트 + 타입스크립트 설치 명령어

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

한 뒤 .js file을 → .ts file로 바꿔서 사용합니다.

 

 

| 타입관련 버그 예방 타입지정

- JSX 타입지정

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

 

- button 등 기본 태그들 간단하게 타입지정할 때

기본 태그들은 JSX.IntrinsicElements라는 이름의 타입으로 사용

let 박스 :JSX.IntrinsicElements['div'] = React.createElement('div');
let 버튼 :JSX.IntrinsicElements['button'] = <button></button>;

 

| 리액트 컴포넌트 타입지정

파라미터와 return 타입지정

파라미터는 항상 props가 있기에 props에 따라서 타입지정,

return타입쪽에는 JSX.Element를 입력(사실 생략해도 자동으로 타입지정된다.)

 

| state 문법 쓸 때 타입지정

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