[TypeScript] 자바스크립트 대신 타입스크립트 사용하는 이유 🤔

Q. 질문

JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요.

 (코드잇 스프린트 위클리 페이퍼 #12)

 

A. 답변

현재 상황

요즘 채용 공고를 보면 대부분 타입스크립트를 할 수 있는 사람을 우대하는 것을 쉽게 볼 수 있다.

그만큼 타입스크립트가 중요하고 대부분의 기업에서 프론트엔드 개발을 할 때 타입스크립트를 채택해 사용하고 있다는 것을 알 수 있다.

 

타입스크립트 사용 이유

그렇다면 자바스크립트 대신 왜 귀찮게 타입스크립트를 사용하는 것일까?

 

바로 프로그램의 안정성 을 위한 것이다.

 

자바스크립트는 알다시피 동적 언어라서 고정된 타입 없이 자유롭게 변수를 선언하고 사용할 수 있다.

이게 자바스크립트의 장점이 될 수 있지만 타입 오류가 코드를 실행하기 전까지 알 수 없게 된다는 단점이 되기 때문이다.

 

그래서 이러한 단점을 해결하기 위해 변수나 함수의 타입을 지정해 줌으로써 개발 단계에서 타입 오류를 사전에 미리 발견할 수 있게 된다.

 

내가 느낀 자바스크립트 단점

그동안 타입스크립트로 프로젝트를 하다가 자바스크립트로 프로젝트를 진행하게 되면서, 왜 타입스크립트를 사용하는지 몸소 느끼게 되었다.

 

1. 컴포넌트 props

프로젝트를 하다보면 button 등과 같은 공통 컴포넌트를 만들게 되는데

다른 컴포넌트에서 공통 컴포넌트를 가져와 사용할 때 실수로 props를 잘 못 넘기거나 꼭 넣어야 될 것을 안 넣은 경우가 발생할 수 있다.

그런데 이런 경우 코드를 실행해도 뭐가 잘 못 되었는지 모르는 경우가 발생한다. 🥲

 

그래서 이를 예방하기 위해 유효성 검사를 하기 위해 propTypes 를 사용하여 프로젝트를 진행하였다.

const Profile = ({
  imageUrl,
  size = 'lg',
  clicked = false,
  selected = false,
  onClickProfile,
  onClickDelete,
}) => {
  // 내용
};

Profile.propTypes = {
  imageUrl: PropTypes.string.isRequired,
  size: PropTypes.oneOf(['lg', 'bg', 'md', 'sm']),
  clicked: PropTypes.bool,
  selected: PropTypes.bool,
  onClickProfile: PropTypes.func,
  onClickDelete: PropTypes.func,
};

export default Profile;

 

propTypes 이 있기 전에 imageUrl 이라는 props 를 넘기지 않을 경우 콘솔에도 딱히 찍히는 오류가 없고 직접 화면을 보고 파악을 해야 된다.

그냥 이미지가 없는 걸 눈으로 확인해야 함

하지만 propTypes 를 사용하면 아래 사진처럼 콘솔에 경고가 찍히게 된다.

경고

하지만 이것도 직접 코드를 실행해야 알 수 있는데

 

만약 타입스크립트를 사용할 경우에는 코드를 실행하기 이전에 아래 사진처럼 미리 알려주기 때문에 개발 단계에서 사전에 미리 오류를 방지할 수 있게 된다.

타입에러

 

2. 함수 props 타입

프로젝트를 하다 보면 util 함수를 만들게 되는데 이때 함수의 props 로 알맞지 않은 값을 넣는다면 의도하지 않는 결과가 나오게 되며 이를 직접 실행해서 화면으로 확인해야 알 수 있게 된다.

 

하지만 타입스크립트를 사용해서 props 의 타입과 return 결과의 타입을 지정해 줄 경우, 코드를 실행하기 전에 미리 에러가 뜨게 되므로 쉽게 코드 오류를 수정할 수 있게 된다.

오류

 

결론

타입스크립트를 사용함으로 코드의 안전성 이 올라가게 된다.

 

특히 협업을 하다보면 다른 사람이 사용한 코드를 사용하게 되는데 이때 타입스크립트를 사용하게 된다면 타인이 만든 함수나 컴포넌트도 타입에 맞게 알맞게 사용하게 되는 등 다양한 장점이 있기 때문에 자바스크립트 대신 타입스크립트를 사용한다면 보다 나은 개발 환경을 만들어 낼 수 있을 것이다.

 

+) 자바스크립트 프로젝트를 타입스크립트 프로젝트로 마이그레이션 하는 방법

[React] 프로젝트 JavaScript 에서 TypeScript 마이그레이션 방법