[React] TypeScript Recap

지금까지 TypeScript 배운 것을 총 복습해보겠습니다.

- App.js

import styled from "styled-components";

// styled component에서 테마에 접근할 수 있음

const Container=styled.div`

  width: 100vw;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

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

`;

interface DummyProps {

  text:string;

  active?:boolean;

}

// text의 타입은 DummyProps라고 타입스크립트에게 알려줌

//active props default값 주기

function Dummy ({text, active=false}:DummyProps) {

  return <h1>{text}</h1>

}

function App() {

  const onClick = (event:React.MouseEvent<HTMLButtonElement>) => {

  }

  return (

      <Container>

        <Dummy active={true} text="Hello" />

        {/* 이벤트에 타입 지정해서 타입스크립트에게 알려주기  */}

        <button onClick={onClick}>click me</button>

      </Container>

  );

}

export default App;

- 결과

+ FormEvent 외에 여러가지 이벤트들이 궁금하다면 SyntheticEvent에서 확인할 수 있습니다.

또한 앞으로 타입스크립트가 아닌 어떤 라이브러리나 패키지를 다운로드 하게될 경우 때때로 타입스크립트 선언 파일이 없을수도 있습니다.  그럴 때는 선언파일(d.ts)를 생성해야합니다. 선언파일은 타입스크립트를 위한 일종의 설명입니다. 혹은 npm i --save-dev @types/라이브러리 혹은 패키지  명령어를 이용해서 선언파일을 찾으려고 시도해볼 수도 있습니다. 존재한다면 설치가 됩니다.