[React] TypeScript를 적용해보자.

TypeScript는 자바스크립트를 기반으로 만든 프로그래밍 언어입니다.

즉, 자바스크립트에 새로운 기능을 추가한 것이에요.

 

타입스크립트라는 언어가 왜 만들어졌냐면, 자바스크립트는 자바나 C++와는 달리 변수의 타입을 선언하지 않기 때문입니다.

해당 언어들은 프로그래밍 언어가 작동하기 전에 타입을 확인하지만 자바스크립트는 아닙니다.

 

한줄 한줄 실행하죠.

 

ES5에서는 var, ES6부터는 let과 const 를 사용하여 객체, 배열, 문자열, 숫자 등의 모든 타입을 만듭니다.

이에 따라 문자열을 받아서 출력해주는 함수가 있다고 했을 때, 이 함수에 문자열이 아닌 숫자가 들어와도 아무런 문제가 없이 실행되는 것입니다. 이러한 경우에서 문제가 발생하였고, 그것을 해결하기 위해 자바스크립트의 코드에서 타입을 선언하는 타입스크립트가 탄생한 것입니다.

타입스크립트를 사용한다면 여러분들은 위와 같은 오류를 마주하지 않아도 되며, 오류에 대해서 더욱 확실한 에러 메세지를 받아볼 수 있습니다.

 

설치:

npx create-react-app 파일이름 --template typescript

 

사용 예시:

import styled from "styled-components";

 

// a와 b는 숫자 타입만이 들어올 수 있다는 것을 의미합니다. 만약 다른 타입이 들어온다면 에러를 발생합니다.

const plus = (a: number, b: number) => a + b;

 

// 객체의 속성들이 어떤 타입인지를 정의해 줍니다.

interface ContainerProps {

  bgColor: string;

}

 

const Container = styled.div<ContainerProps>`

  width: 200px;

  hieght: 200px;

  background-color: ${(props) => props.bgColor};

`;

 

// 객체의 속성인 bgColor에 ?를 통해 Optional 처리해줍니다

// bgColor로 들어올 값이 string이거나 null이라고 선언한 것입니다.

interface CircleProps {

  bgColor?: string;

}

 

function Circle({bgColor}: CircleProps) {

  return <Container bgColor={bgColor} />;

}