[React JS 마스터클래스] TypeScript

TypeScript는 JavaScript를 기반으로 한 프로그래밍 언어

TypeScript는 strongly-typed인데 프로그래밍 언어가 작동하기 전에 type을 확인한다는 것

코드에 실수가 있어도 프로그램이 작동하기 전에 TypeScript가 알려줄 것이다 => 보호조치

const plus = (a:number, b:number) => a+b;
plus(1, 1)
// plus("a", 1) 이렇게 하면 오류!

 

TypeScript는 브라우저가 이해하지 못한다

사용자에게 publish 할 때 TypeScript가 compile해서 평범한 JavaScript로 만들어준다

 

타입스크립트로 리액트 앱 프로젝트 생성

npx create-react-app 내 앱 이름 --template typescript

 

타입스크립트에서는 .ts 확장자 사용

어떤 라이브러리나 패키지는 TypeScript로 만들어진 게 아니라 JavaScript 기반으로 만들어졌다

 

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

@types는 아주 큰 Github repository인데 유명한 npm 라이브러리를 가지고 있는 저장소이고 여기서 라이브러리나 패키지의 type definition을 알려준다

Type definition은 styled-component의 소스코드를 보고 TypeScript에게 해 줄 설명을 만들어 내는 것

 

DefinitelyTyped

https://github.com/DefinitelyTyped/DefinitelyTyped

여기서 TypeScript로 작업할 때 필요한 대부분의 type definition들을 얻을 수 있다

 

Prop Types는 prop이 거기에 있는지 없는지 확인해 주지만 코드를 실행한 후에만 확인 가능하다

TypeScript를 사용하는 이유는 코드가 실행되기 전에 오류를 확인하기 위해서

 

import styled from "styled-components";

const Container = styled.div``;

interface CircleProps {
  bgColor: string;
}

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

export default Circle;

bgColor의 타입은 CircleProps의 object 이다 라고 말해주고 있는 것

그럼 TypeScript는 CircleProps 안에 bgColor가 있다는 것을 알게 된다

 

import styled from "styled-components";

interface ContainerProps{
  bgColor: string;
}

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

interface CircleProps {
  bgColor: string;
}

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

export default Circle;

이렇게 하면 Container가 받는 props를 TypeScript에게 잘 설명해 준다

 

interface는 object의 shape을 타입스크립트에게 설명해 준다

 

interface CircleProps {
  bgColor: string;
  borderColor?:string;
}

borderColor를 optional로 만들어 주기 위해? 추가

 

 return <Container bgColor={bgColor} borderColor={borderColor ?? "white"} />;

borderColor는 사용자가 만든 borderColor값이며 undefined 된 상태라면 white를 값으로 내보낸다

??

앞에 값이 null이거나 undefined이면 오른쪽 값을, 그렇지 않으면 왼쪽 값을 반환하는 논리연산자

 

default값을 argument에서 설정할 수 있다

interface CircleProps {
  bgColor: string;
  borderColor?: string;
  text?: string;
}

...

function Circle({ bgColor, borderColor, text = "default text" }: CircleProps) {
  return (
    <Container bgColor={bgColor} borderColor={borderColor ?? bgColor}>
      {text}
    </Container>
  );
}

 

컴포넌트를 업데이트하고 싶다면 state를 바꿔야 한다

state의 type을 지정하려면 useState<number> 이런식으로 타입 지정

일반적으로는 초기값을 지정하면 타입스크립트가 자동으로 타입을 유추하기 때문에 굳이 지정하지 않아도 되지만 상태가 undefined나 null이 될 수도 있을 때 혹은 객체 또는 배열일 때는 지정해 주는 것이 좋다

  const [value, setValue] = useState<number | string>(0);

 

우리는 any 타입을 배제하고자 노력하고 타입스크립트에게 어떤 타입인지를 쓰거나 설명하고자 노력해야 한다

const [value, setValue] = useState("");
  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setValue(value);
  };

event 안의 currentTarget 안에 있는 값을 가져와야 된다

const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log("hello", value);
  };

event는 form으로부터 왔고 HTMLFormElement가 이 이벤트를 발생시킨다

 

DefaultTheme은 기본적으로 props.theme의 인터페이스로 사용된다

기본적으로 DefaultTheme 인터페이스는 비어있기 때문에 확장해야 한다