Typescript in React

김태경·2022년 9월 30일

오늘은 Typescript를 배웠다. (약칭 TS)
TS는 JS의 확장판이라고 생각하면 되는데 JS와 다른 점은

JS는 타입이 런타임 에 결정되는 동적 타입 언어이고,
TS는 타입이 컴파일 단계 에서 결정되는 정적 타입 언어이다.

😗 타입스크립트를 사용하기 전, 나의 생각들

나는 JS를 시작한지 얼마 안 됐는데 나에게 JS는 너무 불편했던 게 특유의 너무 유연한 코드가 자유롭고 커스터마이징한 작성의 장점보다 높은 런타임 에러 발생율과 any 타입이므로 IDE에서 자동 완성의 불 안정함, 오타 지적 없음의 단점이 개발 생산성을 크게 떨어뜨린다고 생각이 들었었다.

이런 나에게 딱 맞는 언어가 있었으니

바로 Typescript 입니다.

TS는 JS와 비슷하지만 개발 생산성을 극대화 해주는 좋은 친구이고
사용법도 간단한 그냥 JS에서 타입만 선언해주면 되는 프로그래밍 언어라고 생각하면 됩니다.

⭐ 타입만 선언해주는데 생산성이 어떻게 왜 좋아지는 거죠? 라고 의문이 들 수 있다!

🦾 정적 타입 언어가 개발 생산성이 높은 이유

IDE가 현재 객체의 타입을 알고있기 때문에 .뒤로
각 타입에 맞는 메서드, 속성들을 자동 나열, 완성 해준다.

런타임 에러가 나면 서비스 도중에 고쳐야 하기 때문에 미리 방지하기 힘들기 때문 + 현업을 할 때 더 가독성 좋은 코드를 작성할 수 있다.

🚗 리액트 프로젝트에서 TS를 사용해 보자

평소에 CRA로 리액트 프로젝트를 만들 때 TS로 만드려면 아래 코드 처럼
--template typescript만 추가 하시면 됩니다.

npx create-react-app app-name --template typescript

오늘의 소소한 꿀팁: TS에서 JS로 만들어진 라이브러리를 가져올 때 에러가 발생하는데 이는 각 라이브러리 마다 TS에게 확인 받는 npm 명령어가 존재하므로 구글링으로 해결하자!

🤖 타입 지정할 때 보면 프로세스는 항상 비슷한 과정을 거침

원하는 name: type 형태의 인터페이스 (interface)를 만듦
props 사용시 or 값 전달, 받을시에 타입을 지정해주어야 하기에
: 또는 <> 등.. 의 문법을 사용해서 해당 타입을 만들어둔 인터페이스로 지정함

interface 작명시 소소한 꿀팁 : TS에선 interface 변수명 앞에 대문자 I를 붙이고 작명하는 게 관례 처럼 됨!

🤓 간단한 예시 코드로 확인 해봐요!

// 인터페이스 선언
interface ContainerProps {  
  bgColor: string;  // name: type
}

// 스타일드 컴포넌트의 타입을 ContainerProps로 지정 <>
const Container = styled.div<ContainerProps>`  
  background-color: ${(props) => props.bgColor};
`;

// Container 컴포넌트의 props를 주는데 이는
// 위에서 정의한 interface와 name: type이 동일 해야함
<Container bgColor={"black"} />

만약 위 코드에서 bgColor를 props로 안 주면 에러가 납니다!
그럼 bgColor든 뭐든 props를 필수가 아닌 선택적으로 주는 방법은 없는 걸까요?

interface 속성은 default가 required(필수)이므로
props를 하나라도 안 주면 오류가 나는데 이를 optional(선택적)으로 바꾸려면
interface에서 속성이름 끝에 ? (물음표)를 붙여주면 선택적으로 props 전달이 가능!

interface ContainerProps {
  bgColor?: string; // ? (물음표) 붙여서 optional로 바꾸기 
}

optional로 하면 선택적으로 props를 넘길 수 있기에
값이 넘어오지 않은 undefined인 경우 default 값을 설정할 수 있는데
(확인할 대상 ?? (물음표 2개) 기본 값 ) 형태로 기본 값을 설정할 수 있다.

const Container = styled.div<ContainerProps>`  
  background-color: ${(props) => props.bgColor ?? "white"};
`;

TS에서 event를 받아오는 경우 event도 타입을 지정해주어야 한다.
요소마다 타입이 다르므로 구글링해서 사용하면 됨

event: React.FormEvent<HTMLInputElement>  // Form 태그 안에있는 input 요소의 event 타입이다.

🦈 Styled Components's Theme + TS

지난 포스팅에서 JS에서의 Theme 사용 방법을 정리했었는데
TS를 사용하는 경우에 위에서 계속 하였듯
interface를 만드는데 파일 확장자를 .d.ts으로 해야하고
아래 코드 처럼 declare module과 같은 틀을 맞추고 export 해주어야 한다.

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

그리고 .ts 파일에서 원하는 theme을 만들고 .d.ts 파일에 있는
선언한 interface로 타입을 지정해주면 끝!

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

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