JavaScript말고 TypeScript써야 하는이유를 한 줄 요약 하면 아래와 같이 표현할 수 있습니다.

1

TypeScript == JavaScript + 생산성 + 안정성!

TypeScript는 변수의 형식을 다른 정적 컴파일 언어처럼 작성하도록 되어 있습니다.
이는 어쩌면 불필요하게 타이핑을 더 해야만 한다는 것일텐데요, 예를 들어 아래코드를 봅시다.

1
2
3
4
5
6

const a = 100
const b = "I am Ironman."

function add(c, d) {
  return c + d
}

위코드를 typescript로 작성하면 아래와 같이 type지정을 위해 키보드를 더 눌러줘야 합니다.

1
2
3
4
5
6

const a: number = 100
const b: string = "I am Ironman."

function add(c: number, d: number): number {
  return c + d
}

(물론 TypeScript에서 a = 100 으로 해도 자동으로 타입을 지정하긴 합니다)

타이핑을 더 해야 하는데, 사실 생산성이 오를 수 있습니다.

예를 들어, 아래와 같은 코드를 봅시다.

1
2
3
4
5
6
7
8
9

function getPerson() {
  return {
   name: "John",
  age: 20,
  skill: "Math",
 }
}

const p1 = getPerson();

위 코드를 작성하고 한참 뒤에, p1이란 변수를 사용하거나 유지보수를 할 때, 아래와 같은 문제가 생깁니다.

1
2

1) p1 에는 어떤 속성이 있었지?
2) p1 이 primitive 타입이였나?

getPerson() 가 결국 무엇을 반환하는지 알아내기 위해서는,
함수가 정의된 곳으로 다시 찾아가 봐야 합니다.

작성하고 바로 쓸 때는 편할지 몰라도,
p1이 어떤 타입인지 알 수 없으니
다른 파일이나 다른 모듈에서 쓸 경우 꽤나 답답하죠.
바로바로 막 쓰기엔 JavaScript 만한 게 없다가도, 규모가 커지면 이런 문제가 많이 발생합니다.

반면, 동일한 로직의 아래 typescript 코드를 살펴 봅시다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

interface Person {
  name: string
 age: number
 skill: string
}

function getPerson(): Person {
  const person: Person = {
   name: "John",
  age: 20,
  skill: "Math",
 }
 return person
}

const p2: Person = getPerson()

이 코드는 함참 뒤에 유지보수 및 개발을 p2 가 Person interface를 구현한 객체임을 알 수 있습니다.
게다가 IDE를 통해서 p2 가 어떤 프로퍼티를 가지는지 바로 확인가능합니다.

typescript코드가 훨씬 길지만, 생산성이 분명히 오릅니다.
IDE가 p2의 타입을 파악하기 훨씬 편하기에,
p2 안에 어떤 속성이 정의되었는지 바로 알 수 있고, 속성 자동완성도 슬수있습니다.

또한, 만약 Person 타입에 추가로 company 라는 프로퍼티를 추가해야 한다고 가정해 봅시다.
기존 JavaScript에서도 물론 프로퍼티를 추가하면 됩니다만,
문제는 Person이 어디에서 어떻게 쓰이고 있는지 내가 일일히 파악해야 합니다.
어디에서는 company 가 반영되어 있고 어디서는 반영안되있고, 이렇게 순식간에 꽤나 힘든 상황이 될 수 있습니다.

반면, TypeScript는 Person 인터페이스에 company: string 을 추가하면,
그 즉시 Person 타입을 사용하는 모든 코드에서 빨간 밑줄이 그어지며 company 프로퍼티가
빠져 있음을 알려줍니다.
이는 코드 유지보수에 있어서 굉장히 큰 생산성 향상으로 이어집니다.
안정성 향상도 당연히 보장됩니다.