Typescript와 React

기본적인 문법

function Circle() {
  const [value, setValue] = useState<number | string>(0);
  setValue(2);
  setValue("hello");
  setValue(true); // error
  
  return <Container  />;
}

Typescript는 const [value, setValue] = useState()에서 value와 setValue의 타입을 따로 작성하지 않아도 useState() 안에 들어가는 값을 가지고 타입을 자동으로 판단한다.

value와 setValue에 string뿐만 아니라 number의 값도 허용하게 하고 싶으면 useState<number | string>() 형식으로 작성하면 된다.

Form and event

Checkpoint

function App() {
  const onChange = (event) => {};

  return (
    <div>
      <form>
        <input onChange={onChange} />
        <button>Log in</button>
      </form>
    </div>
  );

위의 코드에서 Typescript는 form에서 일어나는 event를 자동으로 Any 타입으로 지정한다. 하지만 Any타입을 배제하려고 노력해야 한다.

event : React.FormEvent<>

event의 타입을 React.FormEvent<>를 통해 react의 form에서 일어나는 event임을 명시해줘야 한다.

React.FormEvent<HTMLInputElement>에서 <> 내부에는 어떤 태그 내에서 일어나는 이벤트인지를 명시해줘야 한다.

어떤 타입을 지정해야하는지는 구글링을 열심히..

Themes

styled-components에는 IDE에서 편집 환경을 지원하고 TypeScript 프로젝트에 유형을 제공할 수 있는 TypeScript 정의 가 DefinedTyped 에 있다.

설치방법

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

themes를 사용하기 위해선 선언 파일을 만들어줘야 한다.
styles.d.ts 파일을 만들고 아래의 코드를 작성해준다.

import "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    textColor: string;
    bgColor: string;
    btnColor: string;
  }
}

styles.d.ts 파일에는 DefaultTheme가 어떤 key와 type을 가져야하는지 지정한다.

테마 팔레트 만들기

themes.ts 파일을 만들고 아래의 코드를 작성해 준다.

import { DefaultTheme } from "styled-components";

export const lightTheme: DefaultTheme = {
  bgColor: "white",
  textColor: "black",
  btnColor: "tomato",
};

export const darkTheme: DefaultTheme = {
  bgColor: "black",
  textColor: "white",
  btnColor: "teal",
};

그 후에 index.tsx에 import { ThemeProvider } from "styled-components"; import { lightTheme } from "./theme";하여 일반 styled-component 형식대로 작성하면 된다. 아래 코드 참조.