[TypeScript] React에서 프로젝트 생성하는 법과 쓰는법

함수에서의 타입스크립트

함수에서 타입을 지정해줄때는 인자와 리턴문에 타입을 지정해주면 된다.
반환되는 값이 없을 경우 void로 적어주면 된다. 리턴문에 타입은 생략이 가능하지만 처음에 쓸 때는 일일히 명시적으로 적어주는 편이 좋다.

function sum(a: number, b: number): number {
  return a + b;
}

function objSum({ a, b }: { a: number; b: number }): string {
  return `${a + b}`;
}

화살표 함수에서의 타입스크립트

화살표 함수로 선언해줄때는 리턴문이 하나에 표현식일 때 괄호는 생략가능하다.

const sum = (a:number, b:number): number => a + b

useState에서의 타입스크립트

리액트에서 상태값을 변경하는 hook인 useState에서는 꺾쇠를 통해 제너릭(데이터의 타입을 일반화 해주는걸 의미한다)을 지정해줄 수 있다.

import { useState } from "react";

function App() {
  const [counter, setCounter] = useState<number>(1);
  const increment = () => {
    setCounter((prev) => prev++);
  };
  return <div onClick={increment}>{counter}</div>;
}

export default App;

React에서 타입스크립트 설치하기

리액트에서 프로젝트 만들어주는 CRA같은 걸 보일러 플레이트라고 부르는데 이런 보일러 플레이트를 생성할 때 npm 기본 패키지 관리자에 방식인 모듈을 로컬에 저장하지 않고 매번 최신 버전의 파일만을 임시로 불러와 실행 시킨 후에, 다시 그 파일은 없어지는 방식으로 모듈이 돌아가고 있기 때문에 최신버전만 다운받아서 실행시켜야 하는 프로젝트에 효율적이다.
또한 CRA를 만들때 폴더 이름뒤에 타입스크립트를 붙여주면 타입스크립트 버전에 프로젝트를 생성할 수 있다.

npx create-react-app my-first-ts-app --template typescript

타입스크립트 확장프로그램 추천

vs코드에서 얘를 다운로드 해주면 -> Pretty TypeScript Errors

이렇게 삭막하게 나왔던 에러가

이렇게 훨씬 보기 쉽게 알려준다.