⚛️ React 프로젝트에서 Typescript 사용하기

당신이 언젠가 타입스크립트를 리액트에서 사용한다면 반드시 보게 될 에러와 해결법들 미리보기

• props에 타입을 지정해보자
• event에는 어떻게 타입을 지정할까?
• interface.tsx
• custom.d.ts

본 포스팅은 카카오톡 클론코딩 프로젝트를 위해 리액트 프로젝트에 타입스크립트를 적용하며 배운 내용들을 기록한 내용입니다. 전체적인 코드는 위 프로젝트 회고 포스팅을 참고해주세요 !

---

1. 타입스크립트로 리액트 개발

타입스크립트 문법을 나름 배웠다고 생각했지만 (feat. 노마드코더) 실제 웹개발 프로젝트에서 적용하려니 js와 달라지고 처음보는 오류도 이것저것 생겨서 자잘하게 신경 쓸 것들이 많았다

타입스크립트 개념은 노마드코더 챌린지가 짱이다. 기초부터 엄청 잘 가르쳐주고 무엇보다 무료(중요)다.

TSX?

보통 타입스크립트를 사용하면 확장자가 .ts 인게 맞지만,
리액트 프로젝트(특히 컴포넌트)에서는 .tsx 를 사용한다.
마치 React에서 .js 가 아닌 .jsx 를 사용하는 것과 같은 원리라고 볼 수 있겠다.

(1) props 타입지정

Binding element 'curUser' implicitly has an 'any' type.ts(7031)

컴포넌트에 props를 전달해줄 때도 타입을 지정해주지 않으면 위 오류가 난다.
이에 전달받을 props에 대한 인터페이스들을 각 컴포넌트 위에 정의해주었다.

// UserList.tsx

interface UserListProps {
  curUser: number;
  users: User[];
  changeUser(id: number): void;
}

const UserList = ({ curUser, users, changeUser }: UserListProps) => {
  return (
    ...
  );
};

(2) event 타입 지정

Parameter 'e' implicitly has an 'any' type.ts(7006)

event 에도 타입을 지정해주지 않으면 뭐라한다.
이벤트의 종류와 해당 이벤트가 발생하는 컴포넌트의 타입을 알아내서 타입을 지정해주자

// InputForm.tsx => onSubmit()

  const onSubmit = (e?: React.FormEvent<HTMLFormElement>) => {
    if (value.length == 0) {
      return;
    }
    e?.preventDefault(); // 버튼을 통한 제출이라면 새로고침 방지
    onConcat(value);
    setValue("");
  };

해당 이벤트가 발생하는 타입 아는 방법
: 해당 코드 위에 마우스를 올리면 자동으로 알려준다

2. 추가적인 파일들

interface.tsx

export interface User {
  id: number;
  name: string;
  profileImage: string;
}

export interface Chat {
  id: number;
  senderId: number;
  text: string;
  date: string;
}

• 공통적으로 사용하는 인터페이스들을 모아서 따로 빼두는 파일이다.
• 본 프로젝트는 유저와 채팅의 타입이 선언되어있다.
  (이후 활용할 때 배열은 users: User[] 와 같은 방식으로 사용)

custom.d.ts

로컬에 있는 이미지를 불러오기위해import img from "./assets/image.png를 사용했는데 오류가 떴다

Cannot find module './profileAssets/dedenne.' or its corresponding type declarations.ts(2307)

• 대충 타입스크립트에 위배된다는 내용 (자바스크립트일때는 문제가 없었다)
• 구글링을 통해 custom.d.ts 파일을 만들어서 다른 확장자인 모듈들도 잘 import될 수 있도록 하였다

declare module "*.jpg";
declare module "*.png";
declare module "*.jpeg";
declare module "*.gif";

---