TypeScript - 2. 리액트와 타입스크립트

1. Props에 Interface 넣는 방법

React.FC<인터페이스명>

interface BoardProps {
  	toggle : boolean
}

const Board: React.FC<BoardProps> = ({ toggle }) => {
  return (<div></div>)
 }

2. 함수형 인터페이스와 setState의 타입

interface 이름 {
 // (매개변수:타입):반환값
    (test: string):void; 
}

3. State형 Props의 타입

interface StateProps {
  // props : 타입
  test: string;
  // setState : 리액트 형식
  setTest: React.Dispatch<React.SetStateAction<string>>;

리액트의 props를 (props) 로 받아올때도 동일한 타입을 쓴다

4. 함수

interface FunProps {
  // props : 타입
  test: string;
  // 함수명:(인자:타입) => 반환값
  handleTest:(test:string) => void;