TypeScript

📚 TypeScript

typeScript 란?

JS를 기반으로 한 언어이며, 강타입 언어로 프로그래밍 언어가 실행되기 전에 type을 확인해 준다.

설치

npx create-react-app (폴더명) --template typescript

yarn create react-app (폴더명) --template typescript

👉🏻 새 폴더로 타입스크립트 설정

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

👉🏻 기존의 폴더에서 타입스크립트 추가

스타일 컴포넌트 타입스크립트 적용

💫  대부분의 라이브러리는 자바스크립트 기반으로 만들어졌기 때문에 타입스크립트는 그 모듈들을 이해하지 못한다. 따라서 타입스크립트가 이해할 수 있는 라이브러리를 따로 설치해 주어야 한다.

styled-components

npm i --save-dev @types/styled-components

yatn add --dev @types/styled-components

Typing the Props

🌱 타입스크립트에서는 전달 받아야할 props를 정의해 줄 수 있다. PropsTypes 사용시 오류를 실행 후 콘솔에서 확인할 수 있었지만, 타입스크립트에서 interface를 통해 props를 정의해 주면 실행 전에도 오류를 감지할 수 있을뿐만 아니라 자동완성을 통해 코드오류를 줄일 수 있다!

import styled from "styled-components";

interface CircleProps {
  bgColor: string;
}

const Container = styled.div<CircleProps>`
  width: 200px;
  height: 200px;
  background-color: ${(props) => props.bgColor};
  border-radius: 100px;
`;

function Circle({ bgColor }: CircleProps) {
  return <Container bgColor={bgColor} />;
}

export default Circle;

👉🏻 Circle과 Container는 bgColor를 꼭 props로 전달받아야 함을 명시해줌. ContainerProps interface를 따로 정의하여 사용해도 되지만, CircleProps와 내용이 겹치므로 그대로 사용해주어도 됨.

State

👻 useState hook을 사용할 때 타입 지정해주기

const [value, setValue] = useState<string>("");

여러 가지의 타입을 값으로 받고 싶다면 <string | number>의 형식으로 적어주면 된다.

Nomad Coders React JS 마스터 클래스 #3