#3.1~#3.3 TypeScript와 props

본 포스팅은 노마드코더 React JS 마스터클래스를 수강 후 작성되었습니다.

#3.1 DefinitelyTyped

📌 TypeScript 설치하기

1.

.tsx 로 파일 명을 가지게 된다.

2.
또는, 기존에 작업하던 것이 있다면, typescript를 전부 설치해주는 방법도 있다.

+) 그 이후 파일의 확장자를 다 .tsx로 해줘야한다.

📌 TypeScript로 만들어지지 않은 라이브러리를 import할 경우

어떠한 라이브러리들은 javascript 기반이라서 typescript 상에서 오류가 뜰 수 있다.

• styled-components의 경우 오류가 有
  - 해결책 : npm install @types/styled-components

@types란 무엇인가?

: 모든 유명한 npm 라이브러리를 가지고 있는 아주 큰 Github repository

여기서 라이브러리나 패키지의 type definition을 알려준다.

#3.2 Typing the Props

TypeScript에게 React component를 설명하는 방법은 다음과 같다.

"component를 type한다는 것 = component에게 type을 준다는 것

∴ 우리는 우리의 prop들을 코드 실행전 typeScript로 보호해주는 것

📌 interface

: 객체 모양을 typeScript에게 설명해주는 typeScript의 개념

Circle.tsx 파일을 새로 만든 EX

import styled from "styled-components";

interface ContainerProps {
  bgColor: string;
}

interface CircleProps {
  bgColor:string;
}

//bgColor의 type은 CircleProps의 object다!
function Circle({bgColor}: CircleProps) {
  return <Container bgColor={bgColor} />;
}


//styled-components가 받는 props를 typeScript에게 설명
const Container = styled.div<ContainerProps>``;

export defaut Circle;

또 다른 예시는 아래와 같다.

interface PlayerShape {
  name: string;
  age: number;
}

//playerObj은 PlayerShape이다!라는 의미
const sayHello = {playerObj: PlayerShape) => `Hello ${playerObj.name} you are ${playerObj.age} years old.`;

sayHello({name:"nico", age:12})

Prop Types와의 차이

• Prop Types는 코드 실행 '후' 브라우저에 에러 有
• TypeScript는 코드 실행 '전' 에러 有

#3.3 Optional Props

default props와 optional props에 대해서 알아보자.

📌 Optimal props

: 필수(required)가 X라, optional하게 props를 주는 것 (있을 수도 있고, 없을 수도 있어!)

optimal하게 props를 만들어주고 싶으면 ? 만 props 뒤에 붙이면 됨 ❗

//bgColor는 required이고, borderColor은 optimal

interface CircleProps {
  bgColor: string;
  borderColor?: string; //optimal props
}

📌 Default props

: optimal props에서 정의되어있다면, 해당 값을, 정의가 안되어있다면 이 default 값을 보내!!

?? 를 통해 default props를 나타냄

//borderColor가 있다면, borderColor / 없다면 bgColor를 사용해줘!
 <Container bgColor={bgColor} borderColor={borderColor ?? bgColor}>