2017년 11월 28일

React에 typeScript 셋팅하기

실습은 tic-tac-toc 이라는 js 프로젝트를 마이그레이션 하면서 typescript를 연습해본다. raect+typescript는 이웅재님의 강의 참고하였습니다. 역시 이론과 실습이 결합할 때가 제일 재밌다!

처음 프로젝트를 생성할 때 부터 타입스크립 버전으로 셋팅하는것이 제일 깔끔하다.

1. `create-react-app ts-test --scripts-version=react-scripts-ts`

create-react-app + 프로젝트 이름 + --scripts-version=react-scripts-ts 추가

react에서 사용하는 PropTypes를 사용하지 않아도 된다.

PropTypes

컴포넌트 에서 원하는 props 의 Type 과 전달 된 props 의 Type 이 일치하지 않을 때 콘솔에서 오류 메시지가 나타나게 하고 싶을 땐, 컴포넌트 클래스의 propTypes 객체를 설정하면 됩니다. 또한, 이를 통하여 필수 props 를 지정할 수 있습니다. 즉, props 를 지정하지 않으면 콘솔에 오류 메시지가 나타납니다.


// Content.js
import React from 'react';
 
class Content extends React.Component {
  render() {
    return (
      <div>
        <h2>{this.props.title}</h2>
        <p> {this.props.body} </p>
      </div>
    );
  }
}
 
Content.propTypes = {
  title: React.PropTypes.string,
  body: React.PropTypes.string.isRequired, // isRequired는 필수의 의미이다.
};
 
export default Content;

2. state와 props는 interface로 처리를 해야한다.

class에서 입출력되는 타입을 검토하기 위해서

배열의 요소가 객체일 경우


interface GameState {
  history: Array<{ squares: Array<string> }> // Array 요소가 객체일 경우 이렇게 타입을 지정해준다.
  stepNumber: number
  xIsNext: boolean
}
 
export default class Game extends React.Component<GameProps, GameState> {
  constructor() {
    super()
    this.state = {
      history: [
        {
          squares: Array(9).fill(null),
        },
      ],
      stepNumber: 0,
      xIsNext: true,
    }
  }
  ...
}

return에 대한 출력값을 타입으로 명시할때

`JSX.Element`

return 내부가 JSX문법이므로 JSX.Element로 명시하였다.


export default class Game extends React.Component<GameProps, GameState> {
  render(): JSX.Element {
    return (
      <div className="game">
        <div className="game-board">
          <Board squares={current.squares} onClick={i => this.handleClick(i)} />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{moves}</ol>
        </div>
      </div>
    )
  }
}