당신이 TS를 사용하시는 이유에 대해 말씀해주세요. 상세히.. JS와 비교해서!🥸

왜 TypeScript를 사용할까? 자바스크립트와 비교하며 이해하며 정리하는 것이 오늘의 목표이다.

 

프로젝트에 투입되면 어떤 곳은 여전히 JavaScript(JS) 를, 어떤 곳은 TypeScript(TS) 를 사용합니다.

그럼 왜 javaScript 쓰다가 TypeScript로 많이 쓰던데 왜 굳이요? 라고 묻는다면

 

요즘은 대부분의 프론트엔드 프로젝트에서 TS를 사용합니다. 이유는 단순히 “타입을 지정할 수 있다”라는 말로는 부족합니다. 이번 글에서는 자바스크립트와 타입스크립트의 차이를 여러 관점에서 풀어보고, 왜 TS를 적극적으로 활용해야 하는지 정리해보겠습니다.

 

1. 강타입 vs 약타입

종류

• 강타입: C++, JAVA, Haskell, Typescript
• 약타입: C, JavaScript, PHP, Rudy, Pyton…

 

• 강타입이란?
  • 프로그래밍 언어에서 정수, 문자열과 같이 데이터 타입을 미리 지정하는 언어. 모든 상수 그리고 변수들은 데이터의 타입을 정의해주어야한다.
  • 서로 다른 데이터 타입의 혼합에 대해서 확고하게 제한을 한다.
• 강타입의 단점과 장점
  • 단점
    • 유연성 감소
  • 장점
    • 엄격한 규칙으로 인해 결과의 일관성을 보장한다.
    • 컴파일 에러를 통한 런타입 에러 방지
    • 타입 에러의 결과를 낳을 수 있는 잘못 사용된 변수들을 모두 골라낼 수 있다는 것
    • 컴파일러를 통한 조기 에러 감지, 최적화된 코드를 통한 개발 가속화
    • 데이터 타입에 대한 명세를 요구한다면 강타입언어를 사용
• 약타입의 단점과 장점
  • 단점
  • 장점
    • 별다른 명세를 요구하지 않는다면 약타입 언어, 약타입 언어의 경우 runtime에 암시적으로 타입의 변환을 실행할 수 있기 때문에 잘못되거나 예측 불가능한 결과를 생산할 수 있다.

• •  

어떻게 강, 약 구분하나?

→ 형변환(type conversion) : 캐스팅(casting) 이라고도 하며 명시적(explicit) 또는 묵시적(implicit)으로 자료의 형식을 변환하는 것을 말한다.

- 한마디로 type을 변환시킨다는 것.

→ 강타입과 약타입이란 형변환(Type Casting or Type Conversion)을 기준으로 구분된다.

 

강타입 언어는 다른 형끼리의 변환이 금지되어있고 변환하고자 한다면 명시적으로 타입을 선언해줘야한다.차이점 강타입 약타입

	형변환 금지	형변환이 자유로움 (암묵적으로 변환을 주기도 한다.)
에러 검출의 가능 여부	타입에러를 항상 검출할 수 있다.	타입에러를 항상 검출할 수 없다.

 

자바스크립트도 변수에 타입을 줄 수 있어서 타입 에러 검출가능하다.

타입의 추론이 사람이아냐 언어가 하냐

언어가 알아서 유추한다. 빌드 시점이 아니라 런타임 시점에서 추론하는게

 

 

- 자바스크립트(JS): 약타입 언어. 숫자 + 문자열 = 문자열 합치기 같은 암묵적 형 변환이 일어나 버그가 생기기 쉽다.

- 타입스크립트(TS): 강타입 체크. 잘못된 타입 조합은 빌드 타임에 에러가 나므로 실수를 미리 막는다.

 

 

2. 런타임 , 빌드타임 시점의 차이

• JS: 실행(런타임) 중에야 오류가 드러난다.
• TS: 실행 전(빌드타임)에 미리 오류를 잡는다.

즉, 사용자가 에러를 보기 전에 개발자가 막을 수 있다는 게 핵심 장점이다.

 

 

 

3. 인터페이스, enum, extends

TS는 객체 구조, 상수 집합, 상속을 명시적으로 표현할 수 있다.
이는 코드의 문서화 + 자동완성 + 안정성을 동시에 준다.

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

enum Role {
  Admin,
  User,
}

interface AdminUser extends User {
  role: Role.Admin;
}

 

 

4. 타입 선언 시점의 차이

• JS: 변수에 뭘 넣든 실행할 때만 알 수 있다.
• TS: 변수를 선언할 때 타입을 강제할 수 있다.

 

 

5. 제너릭 (Generics)

제너릭은 재사용성과 타입 안전성을 동시에 잡아준다.

function wrap<T>(value: T): { data: T } {
  return { data: value };
}

const num = wrap(123);     // { data: number }
const str = wrap("hello"); // { data: string }

 

6. any는 언제 쓰고 왜 남발하면 안될까?

• any: 타입 검사를 완전히 무시 → 다시 자바스크립트와 똑같아진다.
• 언제 쓰나?
  • 외부 라이브러리에서 타입 정의가 없을 때
  • 빠른 프로토타이핑이 필요할 때
• 왜 남발하면 안되나?
  • TS의 장점(안전성, 자동완성)을 다 잃어버리기 때문
  •  단점
    • 타입 유실: TS는 결국 JS로 컴파일되므로, 런타임에서는 타입 정보가 없다.
    • 러닝 커브: 초반에는 문법과 타입 정의가 낯설 수 있다.
    • 개발 속도: 초기 코딩 속도는 느려질 수 있다.
  •  장점
    • 조기 에러 차단: 만에 하나 있을 큰 버그를 미리 막을 수 있다.
    • 대규모 프로젝트 유지보수: 팀원 간 명세가 맞춰지니 협업 효율이 올라간다.
    • IDE 지원 극대화: 자동완성, 타입 추론, 안전한 리팩토링.
• any 말고 안정성을 잡는 방법
  • unknown: any와 비슷하지만, 사용하려면 타입 체크가 필요하다.
  • union type (|): 가능한 타입들을 명시적으로 제한.
  • never: 발생할 수 없는 값을 표현.
  • strictNullChecks: null/undefined를 엄격하게 관리

 

 

 

 

정리

  typeScript는 단순히 “타입 있는 자바스크립트”가 아님. 개발 과정에서 안전망을 제공하는 언어 도구이며, 특히 규모가 커질수록 그 진가를 발휘한다.

• 자바스크립트가 자유로운 인터프리터 언어라면, 타입스크립트는 그 자유를 유지하면서도 안정성과 예측 가능성을 더해준다는 것.
• 때로는 개발자가 컴파일러보다 더 확실히 타입을 아는 경우가 있다. 이럴 때 타입 단언을 사용한다.
• 자바스크립트는 유연하고 빠른 개발이 장점이지만, 그만큼 실수에 관대하다는 단점이 있습니다. TypeScript는 이런 단점을 보완하기 위해 등장한거고. 단순히 "타입 붙이는 언어"가 아니라, 개발 과정에서 버그를 조기에 차단하고, 대규모 프로젝트를 더 안전하게 관리할 수 있게 해주는 도구.