JavaScript vs TypeScript. 왜 타입스크립트를 배워야 할까?

아래 글을 참고하여 덧붙인 글입니다 :)
JavaScript vs TypeScript. Why We Should Learn TypeScript?
TypeScript: Documentation
Why You Should Use Typescript for Your Next Project

🤔 타입스크립트란?

처음엔 타입이 아니라 타임스크립트인 줄 알았는데
타입스크립트 이야기를 하기 전에, 익숙한 자바스크립트에 대해서 먼저 이야기 해보겠습니다.
자바스크립트는 자바 친구인 줄 알았는데

JavaScript는 단 10일에 걸쳐 만들어진 프로그래밍 언어로, 가장 유명하고 널리 쓰이는 프로그래밍 언어 중 하나입니다. 빠르게 만들어진 만큼 문법 체계가 간단하고, 엄격하지 않아요. 즉, 가장 자유로운 언어이자 그만큼 프로젝트에서 마주쳤을 때 당신을 고통스럽게 만드는 언어기도 합니다.

const crazyjs = (a, b) => {
  return a + b;
}

위 코드에서 결과 값을 예상할 수 있나요?
불가능할 겁니다. 왜냐하면 함수 crazyjs는 모든 타입의 변수를 다! 더하려고 들기 때문이에요.

const crazyjs = (a, b) => {
  return a + b;
}
const argIsNumber = crazyjs(10, 5);
console.log(argIsNumber); // 15

const argIsString = crazyjs("10", "5");
console.log(argIsString); // 105

이렇듯, 자바스크립트는 타입에 있어서 매우 매우 유연하게 굴고, 다이내믹합니다. 코드를 쓸 때만 생각하면 편하긴 하지만, 개발자는 어떤 매개변수(argument)를 쓸 건지, 어떤 값이 출력될 건지 많은 주의를 기울여야 해서 피곤하죠.
더 많은 코드를 읽을 수록, 자바스크립트의 이런 특징은 당신을 더 지치게 할 거고요.

타입스크립트 코드를 한 번 봅시다.

const thisIsTypeScript = (a: number, b:number): number => {
  return a + b;
}

이렇듯 타입스크립트는 정적 타이핑 방식입니다. 즉, 코드를 작성할 때 변수의 타입을 지정해주는 것이죠.
위 함수를 보면 crazyjs 함수와 달리 출력 값이 숫자 일 것이라고 확신할 수 있습니다.

---

타입스크립트 기본

타입 스크립트의 원시 자료형(primitive data types)은 다음과 같아요.

• string
• number
• boolean
• null
• symbol
• bigint
• undefined
• ...

const Red: number = 1111; // O
const Red: number = "ff1111"; // X

const Sky: string = "is blue"; // O
const Sky: string = true; // X

const Love: boolean = true; // O
const Love: boolean = 0; // X

원래 자바스크립트에서는 1+true를 2로 반환했다면, 이제 타입스크립트에서는 안되는거죠! 1은 숫자고, 2는 boolean이니까요.

자료형 any???

자료형 중 any라고 있는데요, 이건 모든 자료형을 다 에러 없이 받아 들이는(?) 겁니다. 바닐라 자바스크립트와 비슷해요.

let anything: any = 1111;
console.log(typeof anything) // number

anything = "isItOkay?";
console.log(typeof anything) // string

Object 자료형

타입스크립트에서 객체 자료형은 inteface라는 걸로 정의합니다.

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

const user: User = {
  name: "Jamie";
  id: 0;

만약 여기서, interface에서 정의하지 않은 객체를 쓰면 오류가 뜹니다.

const user1: User = {
  username: "Hayes",
>>> 오류 메시지 <<<
  id: 0,
};

자바스크립트가 객체 지향 프로그래밍 언어였듯, 타입스크립트도 마찬가지입니다. 그래서 클래스를 정의할 때에도 interface를 사용합니다.

interface User {
  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("Murphy", 1);

Array 자료형

파이썬에서는 리스트라고 부르는 array 자료형입니다. 타입스크립트에서는 다음과 같이 씁니다.

const colors: string[] = ["red", "skyblue", "yellow"];

만약 여기서 한 요소의 자료형을 바꾸게 되면 에러가 납니다.

const colors: string[] = ["red", "skyblue", true];

우리는 배열 내의 요소 각각에 모두 신경을 쓸 수 없기 때문에, 이렇게 잘못된 값이 들어왔을 때 알려주는 타입스크립트 기능이 매우 유용합니다.
또한, Array 자료형은 다음과 같이 정의할 수도 있습니다.

const colors: Array<string> = ["red", "skyblue", "yellow"];

그 외

이 외에도 Union이나 tupple에 대한 것도 있지만 여기서 모두 다루지는 않겠습니다.

---

그래서, 왜 TypeScript인가?

사실 타입스크립트의 강점은 처음부터 느끼기엔 힘듭니다. 자바스크립트에서는 변수 타입 선언 없이 편하게 썼었는데, 이제 하나하나 다 지정해줘야 하니까요. 하지만, 쓰면 쓸수록 타입스크립트의 장점을 느끼게 될 거예요.

타입스크립트 역시 빠르게 개발된 언어이며, 개발자 커뮤니티 역시 아직도 성장중입니다. 이 때문에 새로운 버전이 주기적으로 출시되고 있고 이는 타입스크립트 계속해서 장벽을 낮추고 있어요. 그 덕분인지 The PYPL PopularitY of Programming Language Index에서 10위에 오르기도 했습니다.

그리고 위에서 crazyjs 함수를 통해 느꼈듯이 자바스크립트는 코드를 보자마자 이해하는 게 힘들었어요. 예시는 간단한 함수였지만, 더 복잡해진다면 어떤 매개변수가 필요하고, 어떤 값으로 반환될 지 예상하기 힘드니까요. 반면, 타입스크립트는 익숙해지기만 한다면 코드와 사용된 라이브러리를 이해하는데 훨씬 편해집니다.

사실 가장 중요하고, 혁신적인 부분은 자동 완성입니다. 백엔드 개발자라면 놀라겠지만, 프론트엔드 개발자 입장에서는 엄청 중요한 부분이죠.

---

---

TypeScript 사용 1일차 후기

솔직하게 말하면 아직까지는 정말 왜! 굳이! 시간도 부족한데 새로운 언어를 배워야하는지는 잘 모르겠다... 하지만 다들 입 모아 타입스크립트를 칭찬하는데는 이유가 있겠지 하고 있다.
이전 프로젝트는 리액트+자바스크립트 조합이었어서 코드를 참고하면서도 타입스크립트 공식 문서도 옆에 띄워놔야해서 조금 불편하긴 하지만 오늘 본 포스트에서 말하듯 익숙해지면 그 강점을 체감하게 된다고 하니 그날을 기대하며! 열심히 배워보고자 한다...