TypeScript vs JavaScript

TypeScript vs JavaScript

1. TypeScript의 장점

TypeScript는 JavaScript의 상위 잡합 언어로, 정적 타임 검사와 향상된 코드 구조를 제공한다. 많은 개발자들이 JavaScript로 작업하던 중에 느끼는 문제점을 해결하고자 TypeScript를 선택하게 되었다.

1.1 정적 타임 지원

JavaScript는 동적 타입 언어로, 변수가 실행 중에 타입을 가질 수 있다. 이는 유연성을 주지만, 런타임 에러가 발생할 가능성이 크다. TypeScript는 정적 타입 검살ㄹ 도입해 컴파일 단계에서 타입 오류를 미리 잡아내므로, 코드의 안정성을 높인다.

function add(a: number, b: number): number {
  return a + b;
}

add(1, "2"); // 컴파일 오류 발생

1.2 향상된 개발자 경험(DX)

TypeScript는 IDE와의 호환성이 뛰어나서 자동 완성, 타입 추론, 코드 네비게이션 등의 기능을 제공한다. 이는 개발자가 코드의 구조를 더 쉽게 파악하고, 실수를 줄이는 데 도움을 준다.

1.3 코드 리팩토링 용이성

타입이 명시된 코드는 구조를 파악하기 쉽고, 대규모 프로젝트에서 코드 리팩토링을 진행할 때 오류 발생 가능성을 줄여준다. 특히 팀 프로젝트에서는 타입 정의를 통해 팀원 간의 의사소통이 원활해지고, 코드의 유지 보수성이 높아진다.

1.4 JavaScript와의 호환성

TypeScript는 JavaScript로 트랜스파일되므로, 기존 JavaScript 프로젝트에 쉽게 통합할 수 있다. 점진적으로 도입 가능하며, 필요에 따라 JavaScript 파일과 TypeScript 파일을 혼용해 사용할 수 있따.

---

TypeScript 고급 타입 활용법

TypeScript의 기본적인 타입 선언만으로도 많은 장점을 얻을 수 있찌만, 고급 타입을 활용하면 더욱 효율적인 코드를 작성할 수 있다.

1. 유니언 타입(Unionn Types)

유니언 타입은 하나 이상의 타입을 가질 수 있는 변수를 정의할 때 사용된다. 이는 함수에서 다양한 입력을 처리할 때 유용하다.

function format(value: string | number) {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value.toFixed(2);
}

위 코드에서 value는 문자열일 수도, 숫자일 수도 있으며, 각각에 맞는 처리를 할 수 있다.

2. 인터섹션 타입(Intersection Types)

인터섹션 타입은 여러 타입을 하나로 결합할 때 사용한다. 서로 다른 타입의 모든 속성을 포함한 새로운 타입을 정의할 수 있다.

interface User {
  name: string;
}

interface Admin {
  isAdmin: boolean;
}

type AdminUser = User & Admin;

const user: AdminUser = { name: "Alice", isAdmin: true };

AdminUser 타입은 User와 Admin의 속성을 모두 가지므로, 두 역할을 결합한 객체를 정의할 수 있다.

3. 제네릭(Generic)

제네릭은 타입을 함수, 클래스, 인터페이스에서 동적으로 사용할 수 있게 해준다. 이로 인해 재사용성 높은 코드를 작성할 수 있다.

function identity<T>(arg: T): T {
  return arg;
}

const num = identity<number>(5);
const str = identity<string>("Hello");

위 코드에서 identity 함수는 전달된 인자의 타입에 따라 반환 타입이 결정되므로, 다양한 타입을 지원하는 유연한 함수를 만들 수 있다.

4. 조건부 타입(Conditional Types)

조건부 타입은 타입에 따라 다른 타입을 선택하는 데 사용된다.

type IsString<T> = T extends string ? true : false;

type Test1 = IsString<string>; // true
type Test2 = IsString<number>; // false

5. 유틸리티 타입(Utility Types)

TypeScript는 다양한 유틸리티 타입을 제공하여, 기존 타입을 변형하거나 새로운 타입을 쉽게 생성할 수 있다. 자주 사용되는 유틸리티 타입으로는 Partial, Pick, Omit 등이 있다.

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick<Todo, "title" | "completed">;

const todo: TodoPreview = {
  title: "Learn TypeScript",
  completed: false,
};

Pick 유틸리티 타입을 사용해 Todo 인터페이스에서 필요한 속성만 선택할 수 있다.

---

결론

TypeScript는 JavaScript의 한계를 보오나하면서도 강력한 타입 시스템을 제공해 대규모 프로젝트에서 안정성을 높이고, 효율적으로 코드 관리가 가능하다. 특히, 고급 타입을 활용하면 더욱 강력하고 유연한 코드를 작성할 수 있어, 다양한 상황에서 더 나은 개발 경험을 제공한다.