리액트에서 타입스크립트 사용

리액트에서 타입스크립트 사용

---

• 아래와 같은 명령어를 터미널에 입력한 합니다.

npx create-react-app 프로젝트명 --template typescript  //..새로운 리액트 생성
npm install --save typescript @types/node @types/react @types/react-dom @types/jest //기존의 리액트에 설치

• 생성된 파일은 .tsx파일로 .jsx로 변환할 수 있습니다.
• js에서 사용하는 ts문법을 그대로 사용할 수 있습니다. 

 

 

JSX에서 타입지정

---

• 기존에 Element와 별개로 컴포넌트나 html요소를 할당한 변수를 JSX.Element타입으로 지정할 수 있습니다.

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

function App:JSX.Element {
  return (
    <div></div>
  )
}

• props도 객체의 형식으로 타입을 지정할 수 있습니다. 도한 커스텀 타입으로도 할 수 있습니다.

type AppProps = {
  name: string;
}; 

function App (props: AppProps) :JSX.Element {
  return (
    <div>{message}</div>
  )
}

• state경우 자동으로 타입이 할당되지만,제네릭을 사용하여 타입을 지정할 수 있습니다.

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

• 단, assertion을 할 때는 <>은 사용불가하고 as로 사용해야 합니다.

let code: any = 123; 
let employeeCode = <number> code; //에러
let employeeCode = code as number;