TypeScript를 왜 써야할까

TypeScript란?

Typescript는 Microsoft가 개발한 프로그래밍 언어로, javasript의 모든 기능을 제공합니다. 추가로 정적 타입 검사를 가능하게 해주는 유용한 프로그램 언어입니다.

TypeScript는 JavaScript의 superset입니다. 즉, TypeScript를 사용한다면 JavaScript의 모든 기능을 사용할 수 있습니다. JavaScript에 새로운 정적 타입 검사 기능을 추가한 언어라고 간단하게 설명할 수 있을 것 같습니다.

자세한 사용법은 TypeScript 공식 HandBook에 잘 나와있습니다.

https://www.typescriptlang.org/docs/handbook

이번 세미나에서 저는 TypeScript를 LoginContext에 활용하였는데,

type TLoginContext = {

  userToken: string | null | undefined;

  login: (username: string, password: string) => void;

  logout: () => void;

  setUserToken: React.Dispatch<React.SetStateAction<string | null | undefined>>;

  isTokenExpired: () => void;

};

이런식으로 function이나 변수의 type을 지정하여 사용하였습니다.

이렇게 type을 일일히 지정해주는 것은 처음 접했을 때에는 상당히 귀찮을 수 있습니다. 우리는 왜 TypeScript를 사용할까요?

TypeScript를 사용하는 이유

TypeScript는 Type Error를 사전에 방지해준다는 점에서 그 의의가 있습니다.

JavaScript는 상당히 약한 언어입니다. 따로 type 선언 기능이 없기 때문에 string이 선언되어있던 변수에 integer를 넣던, null를 넣던 따로 오류 메시지를 띄워주지 않습니다. 이는 예기치 못한 문제점을 발생시킵니다. 이는 JavaScript는 type 시스템이 없는 동적 프로그래밍 언어이기 때문입니다.

const addOne = (x) => {

return x + 1;

};

addOne(‘2’);

이 코드는 JavaScript에서 3을 출력합니다. 타입이 정해져있지 않기 때문에 JavaScript가 적당히 작동하게끔 값을 출력한 것입니다. 굉장히 자유롭습니다! JS를 배울 때 ‘악명이 높은’ 언어라고 들었는데, JS를 처음 접한 저는 이런 점을 마음에 들어 했습니다. 실수로 잘못 type을 입력해도 알아서 바꿔주니 오히려 좋은 것이 아닌가? 라는 생각을 했습니다. 하지만 이런 높은 자유도는 예기치 못한 에러를 발생시킵니다.

이번 세미나 과제를 하면서 겪은 저의 예시를 보겠습니다.

studentList = [ { name: “피카츄”, grade: 1},{name: “라이츄”, grade: “1”}]

const first = firstGrade.filter((item) => item.grade === 1).length;

이 상황에서 first의 값은 1입니다. 실제로 1학년의 학생 수는 2명인데도 말입니다. 이는 studentList에 학생을 추가할 때 grade에 parseInt()를 적용하지 않아 입력한 string 그대로 학년이 들어간 것입니다. 대시보드에서 학생 수를 세는 것이 바로 적용되지 않게 되었고 저는 useEffect같은 엉뚱한 데에서 답을 찾느라 6시간 정도를 허비했습니다.

하지만 JavaScript는 잘못한 게 없습니다. 위의 코드 자체는 문법에 맞기 때문입니다. 처음부터 typescript로 코드를 짰다면 이런 불상사는 생기지 않았을 것입니다. 이렇게 type 오류로 발생할 수 있는 error를 사전에 막을 수 있습니다.

위에서 JavaScript에서 작성한 코드는 다음과 같이 바꿀 수 있겠네요!

![image](https://user-images.githubusercontent.com/13569506/141656676-852e69fa-dec8-4129-8124-621f1d101fb8.png)

const addOne = (x : number) : number => {

return x + 1;

};

addOne(‘2’); //Error: TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

이런 단순한 type 실수 외에도 axios.get으로 받아온 값에 .data를 해주지 않은 경우나 context에서 실수로 괄호를 빼먹은 경우 모두 잡아줄 수 있습니다.

return (

    <LoginContext.Provider

      value={ userToken, login, logout, setUserToken, isTokenExpired } //여기

    >

      {children}

    </LoginContext.Provider>

  );

지난 세미나에서도 이것 때문에 고생을 했는데, 확실히 TypeScript가 있었다면 더 빨리 디버깅을 할 수 있었을 것 같네요!

그 외에도 자동완성이 좀 더 편해지고, 에러 메시지가 좀 더 명확해지는 장점이 있습니다.

어떻게 동작하는가?

TypeScript는 컴파일러가 소스코드를 JavaScript로 변환해준다는 점에서 다른 언어와 차이가 있습니다. 아래에 있는 그림에 잘 정리가 되어있습니다.

출처:https://velog.io/@ggob_2/typescript-2

타입스크립트는 2번 과정에서 type check를 해줍니다. 일일히 프로그램을 실행해보지 않아도 컴파일 과정에서 type error가 있는지 확인해줍니다. 이후 작성한 코드는 JavaScript 소스가 되어서node.js같은 프로그램으로 넘겨집니다. 이렇게 type checking 과정을 한번 거치기 때문에 좀 더 안전하게 프로그램을 실행할 수 있게 됩니다. 여기서 TypeScript의 주 목적은 type을 미리 check하여 실수를 줄이는 것에 있음을 추측할 수 있습니다. TypeScript는 정적 타입 검사 및 디버깅의 편의를 위해 디자인되었고, 나머지 과정은 원래 JS가 거치던 프로그램에 맡기는 것을 알 수 있습니다.

마치며

TypeScript를 처음 쓸 때 정말 감명깊었습니다. “이렇게까지 꼼꼼하게 봐준다고?” 라는 생각이 들 정도였습니다. 코드 오류를 내지 않기 위해 꼼꼼히 체크해주는 엄마 같은 언어였습니다.

앞으로 새로운 프로젝트를 시작할 때는 항상 타입스크립트로 짜게 될 것 같습니다!