[React] TypeScript 로 객체 속성 타입 검사하기(1)

이전에는 PropTypes로 타입을 검사했다면 이번에는 TypeScript로 타입을 검사한다.

PropTypes와 TS로 검사할때의 차이는 PropTypes는 코드를 작성하고 빌드해야 오류메세지가 뜨지만 TS는 빌드 전에 오류메세지가 뜬다.

기존에는 JS로 프로젝트를 작성했기때문에 이번엔 TS기반의 React app을 설치해야한다.
https://ko.reactjs.org/docs/static-type-checking.html#typescript

npx create-react-app my-app(앱이름) --template typescript

앱을 설치할 위치에 터미널을 열어서 위의 명령어를 입력하면 된다.

styled도 TS에 맞게 설치한다.

npm install @types/styled-components

TS용 styled-components 정보는 여기에 있다.

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/styled-components

기본 설정이 완료됐으니 실습을 해본다.

App.tsx에 Circle 컴포넌트를 import하고 bgColor속성을 입력한다.

App.tsx

import Circle from './Circle';

function App() {
  return (
    <div>
      <Circle bgColor="pink" borderColor="tomato" />
      <Circle bgColor="tomato" />
    </div>
  );
}

export default App;

Circle.tsx에서는 App.tsx에 입력한 bgColor속성이 타입규칙에 맞는지 확인하는 설정을 추가한다.

Circle.tsx

import styled from 'styled-components';

//Circle의 prop을 설명하는 interface를 생성한다.

//const x = (a:number, b:number) => a+b;
//와 마찬가지로 각 element들은 타입을 작성할 수 있는데 그걸 편의상 CirlcleProps 객체에 몰아 넣어서
//타입을 검사하는 거라고 생각하면 된다.
//' : '으로 타입검사하는 모든 속성은 필수값이되어 속성이 존재하지않으면 오류메세지가 뜨지만 ' ?: '로 작성한다면 optional이 되어 오류 메세지가 뜨지 않는다.
interface CircleProps {
  bgColor: string;
  borderColor?:string;
}

//Container는 CircleProps interface를 받아서
//background-color의 속성이 
const Container = styled.div<CircleProps>`
  width: 200px;
  height: 200px;
  background-color: ${(props) => props.bgColor};
  border-radius: 100px;
`;

//bgColor가 CircleProps 객체에 속해있다는걸 명시함
//CircleProps에 속해있지 않은 element를 넣으면
//Property 'x' does not exist on type 'CircleProps'. 라는 경고가 뜬다.
function Circle({ bgColor, x, borderColor }: CircleProps) {
  return (
    <div>
      <Container bgColor={bgColor} borderColor=
      {borderColor ?? bgColor}/>
    </div>
  );
}

export default Circle;