[TypeScript] create-react-app 으로 시작하기

npx create-react-app typescript-cra-project --template typescript

.js 파일 대신 .tsx 파일이 생성된다.
파일에서 JSX 문법을 사용한다면 .tsx 파일로 만들어야 한다.

타입스크립트로 작성한 코드는 npm run build를 통해 자바스크립트로 컴파일 된다.

자바스크립트와 다르게 사용하지 않는 변수가 있으면 불필요한 코드가 있음을 알려준다. (any 타입을 설정해 놓을 것)

package.json

• typescript 설치됨
• @types/react, @types/react-dom 패키지 설치됨
  바닐라 자바스크립트 라이브러리와 타입스크립트 프로젝트 사이의 번역기 역할
  타입 표기 기능을 자바스크립트 라이브러리에 추가한다.

React.FC

함수형 컴포넌트를 제네릭 함수로 만들어서 사용하면 props 객체 타입 지정이 편리해진다.

//before...
const Todos = (props: { items: string[], chlidren: ... }) => {
  return ...
}
  

//Generics
import React from "react";

const Todos: React.FC<{items: string[]}> = (props) => {
  return ...
}

  
//React.FC
type FC<P = {}> = FunctionComponent<P>;