[TS] 타입스크립트의 장단점

jiny·2025년 1월 30일

기술 면접

목록 보기

47/78

🗣️ 타입스크립트를 사용해 보셨나요? 타입스크립트를 사용하면 느낀 장단점에 대해 설명해주세요.

의도: 타입스크립트를 사용해 봤는지 확인하는 질문
팁: 자바스크립트를 사용하면서 느꼈던 단점을 타입스크립트가 해소시켜줬다는 표현을 사용해도 좋다.
나의 답안

타입스크립트를 사용하면서 느낀 장점은, 코드의 안정성과 가독성이 높아진다는 점입니다.
컴파일 단계에서 타입 오류를 미리 잡을 수 있어서 런타임 에러를 크게 줄일 수 있었고,
IDE 자동완성이나 타입 추론 덕분에 유지보수도 훨씬 쉬워졌습니다.
또한 팀 프로젝트에서는 각 함수의 입력과 출력 타입이 명확히 정의되기 때문에, 협업 시 의사소통 비용이 줄어드는 효과가 있었습니다.

단점으로는, 초기 설정이 다소 번거롭고, 복잡한 제네릭이나 유니온 타입을 다루다 보면 코드가 길어지고 난해해지는 경우가 있었습니다.
또한 라이브러리 타입 정의 파일(@types/)이 미흡하거나 잘못된 경우엔 직접 수정해야 하는 번거로움도 있었습니다.

하지만 전체적으로 보면, 프로젝트 규모가 커질수록 TypeScript의 장점이 훨씬 크다고 느꼈습니다.
그래서 이후에는 개인 프로젝트나 협업 환경에서도 기본적으로 타입스크립트를 도입하고 있습니다.
주어진 답안 (모범 답안)

자바스크립트를 사용하면서 느꼈던 가장 큰 단점은 바로 동적 타이핑을 지원하는 언어라는 점입니다.
이러한 특징 때문에 버그를 찾기도 힘들고 자동 완성도 부족하여 견고한 애플리케이션을 만드는 데에 어려움이 많았습니다.

허나 타입스크립트의 정적 타이핑 기능을 통해 이러한 어려움이 말끔하게 해소되었습니다.
모든 변수와 객체에 타이핑을 하게 되어 굳이 직접 실행하지 않고도 컴파일 시점에 오류를 체크할 수가 있었고, 제가 좋아하는 자동 완성을 십분 활용하여 오타로 인한 실수도 현저히 줄일 수 있었습니다.
덕분에 견고하고 든든한 애플리케이션을 작성할 수 있었고, 저는 타입스크립트를 사용한 뒤로는 자바스크립트를 사용해 프로젝트를 진행한 적이 한 번도 없을 정도입니다.

다만 타입스크립트의 큰 단점도 빼놓을 수 없는데요, 바로 러닝 커브(Learning Curve)가 가파르다는 것입니다.
실제로 저도 항상 타입스크립트의 업데이트 내역을 확인하고, 여러 유틸리티 타입이나 동적으로 타입을 연결하는 방법을 꾸준히 공부하고 있기에 가장 크게 느끼는 단점입니다.

📝 개념 정리

타입스크립트(TypeScript, TS)는 마이크로소프트가 개발한 오픈소스 프로그래밍 언어로, 자바스크립트(JavaScript, JS)에 정적 타입 시스템과 최신 ECMAScript 기능을 추가한 상위 집합(Superset)이다.
즉, 타입스크립트로 작성된 코드는 자바스크립트로 변환(트랜스파일)되어 실행된다.
타입스크립트의 장점과 단점을 알아보자.

🌟 타입스크립트의 장점

정적 타입 시스템으로 인한 코드 안정성 증가
- 타입스크립트는 컴파일 시점에 타입을 검사하므로, 타입 관련 오류를 사전에 방지할 수 있다.
- 런타임이 아니라 개발 단계에서 버그를 잡을 수 있어 디버깅 시간이 줄어든다.
- 예제
```
function add(a: number, b: number): number {
  return a + b;
}
console.log(add(10, "20")); // [에러] 타입 오류 발생 (JS에서는 런타임에 오류 발생)
```
  - 위 코드에서 b에 문자열 "20"을 전달하면 타입스크립트는 오류를 감지하지만, 자바스크립트에서는 런타임까지 버그가 드러나지 않는다.

IDE 지원 강화 (자동 완성, 타입 추론, 코드 탐색)
- VSCode 같은 IDE(Integrated Development Environment, 통합 개발 환경)에서 자동 완성(IntelliSense), 실시간 타입 체크, 리팩토링 기능이 향상된다.
- 함수나 변수의 타입이 명확하므로, 다른 개발자가 코드의 목적을 쉽게 이해할 수 있다.
- 예제
```
interface User {
  id: number;
  name: string;
}
const user: User = { id: 1, name: "Kim" };
console.log(user.email); // [에러] email 프로퍼티가 존재하지 않음
```
  - 자바스크립트에서는 실행 후 undefined가 발생하지만, 타입스크립트에서는 코드를 작성하는 순간 오류를 감지할 수 있다.

코드 가독성과 유지보수성 향상
- 타입스크립트는 명시적인 타입을 제공하여 코드의 의미를 명확하게 전달할 수 있다.
- 대규모 프로젝트에서 유지보수가 쉬워지고, 협업이 원활해진다.
- 함수의 매개변수 및 반환 타입을 명확히 지정하면 오해를 줄일 수 있다.
- 예제
```
function greet(name: string): string {
  return `Hello, ${name}!`;
}
console.log(greet(123)); // [에러] 타입 오류
```
  - name의 타입이 명확히 지정되어 있어, 잘못된 데이터 유형이 들어오는 것을 방지할 수 있다.

객체 지향 프로그래밍(OOP) 지원 강화
- 타입스크립트는 인터페이스, 제네릭, 접근 제한자(public, private, protected) 등을 지원한다.
- 이를 통해 OOP 패턴을 쉽게 적용할 수 있으며, 대규모 프로젝트에서도 강력한 설계를 가능하게 한다.
- 예제 (클래스 & 인터페이스)
```
interface Animal {
  name: string;
  makeSound(): void;
}

class Dog implements Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  makeSound(): void {
    console.log("Woof!");
  }
}

const myDog = new Dog("Buddy");
myDog.makeSound(); // "Woof!"
```
  - 위 코드에서 Dog 클래스는 Animal 인터페이스를 구현하여 구조적 일관성을 유지할 수 있다.

ES6+ 최신 문법 지원 및 호환성 유지
- 타입스크립트는 최신 ECMAScript(ES6, ES7, ES8 등) 기능을 지원하고, 하위 버전의 자바스크립트로 변환할 수 있다.
- 브라우저 호환성을 유지하면서도 최신 문법을 사용할 수 있어 코드 품질이 향상된다.
- 예제 (ES6+ 문법 사용 가능)
```
const sum = (a: number, b: number): number => a + b;
console.log(sum(5, 10));
```
  - 자바스크립트의 최신 문법(화살표 함수, 비구조화 할당 등)을 지원하며, 트랜스파일 과정에서 ES5 등의 구 버전으로 변환 가능하다.

대형 프로젝트에서의 확장성 증가
- 타입스크립트는 정적 타입 시스템 덕분에 프로젝트가 커져도 코드 품질을 유지할 수 있다.
- API 응답 타입 정의, DTO(Data Transfer Object) 설정, 공통 타입 관리 등이 가능해진다.
- 라이브러리, 모듈을 분리하고 재사용할 때에도 타입이 보장되므로 오류가 줄어든다.

🌟 타입스크립트의 단점

러닝 커브가 존재함
- 자바스크립트 개발자는 타입스크립트의 타입 시스템, 인터페이스, 제네릭 등을 새롭게 배워야 한다.
- 특히, 타입 추론이나 고급 타입(제네릭, 유니온 타입, 인덱스드 타입 등)은 초보자가 이해하기 어려울 수 있다.
- 예제 (제네릭 사용)
```
function identity<T>(arg: T): T {
  return arg;
}
console.log(identity<string>("Hello")); // "Hello"
```
  - 제네릭을 처음 접하는 사람에게는 코드의 의미를 이해하는 데 시간이 필요할 수 있다.

컴파일 단계가 필요함
- 타입스크립트는 자바스크립트로 변환(트랜스파일)해야 실행할 수 있으므로, 자바스크립트에 비해 빌드 과정이 추가된다.
- 프로젝트가 커질수록 트랜스파일 시간이 증가할 수 있다.
- 타입스크립트를 사용하면 tsc(TypeScript Compiler) 또는 webpack, Babel 등의 도구를 추가로 설정해야 한다.

엄격한 타입 체크로 인해 유연성이 감소할 수 있음
- 자바스크립트의 동적 특성을 활용하기 어려워질 수 있다.
- 예제 (자바스크립트에서는 허용되지만 타입스크립트에서는 오류 발생)
```
let value: any = "Hello";
value = 42; // any 타입이므로 허용
let value2: string = "Hello";
value2 = 42; // [에러] 타입 오류
```
  - 엄격한 타입 체크 덕분에 오류를 줄일 수 있지만, 자유로운 형 변환이 어렵다.

타입 정의 문제 발생 가능
- 타입스크립트를 사용하면 종종 외부 라이브러리의 타입 정의(@types/*)가 필요하다.
- 모든 자바스크립트 라이브러리가 타입스크립트를 공식 지원하는 것은 아니므로, 타입이 없는 경우 직접 작성해야 한다.
- 예제
```
import * as moment from "moment"; // 타입 정의 필요
const now = moment(); // 일부 라이브러리는 @types/moment 설치 필요
```
  - 서드파티 라이브러리가 타입을 제공하지 않으면 any 타입을 쓰거나 직접 타입을 정의해야 하므로 번거롭다.

파일 크기 증가
- 타입 정보가 포함되므로 타입스크립트 코드가 자바스크립트보다 길어질 수 있으며, 트랜스파일된 코드의 크기가 커질 수 있다.
- 특히 인터페이스, 타입 선언이 많아지면 코드가 복잡해질 가능성이 있다.

🌟 타입스크립트가 적합한 경우 vs. 적합하지 않은 경우

타입스크립트를 사용하는 것이 유리한 경우
- 대규모 프로젝트 (코드 안정성이 중요)
- 협업 프로젝트 (명확한 타입 시스템이 필요)
- 유지보수 및 확장성이 중요한 프로젝트
- 최신 자바스크립트 문법을 사용하면서도 하위 버전 지원이 필요한 경우

타입스크립트가 적합하지 않은 경우
- 간단한 스크립트나 실험적인 프로젝트
- 빠르게 개발해야 하는 MVP(최소 기능 제품)
- 정적 타입 시스템이 필요하지 않은 경우

jiny

이전 포스트

[JS] 비동기 함수를 병렬로 호출하는 방법

다음 포스트