내일배움캠프 React_7기 TIL - 38. 타입스크립트 기본

1. 타입 선언

• 기본 타입: number, string, boolean, void, null, undefined 등.
• 객체 타입: Object, Array, Function 등.
• 커스텀 타입: type 또는 interface로 선언.
• never 타입:
  • 반환되지 않는 함수나 불가능한 상태를 표현할 때 사용.
  • 예시:

    
    function throwError(message: string): never {
        throw new Error(message);
    }

2. 시그니처 인덱스

• 객체의 동적 키와 값을 타입으로 지정.
• 문법: [key: string]: valueType.
• 예시:

  
  interface Dictionary {
    [key: string]: string;
  }
  
  const dictionary: Dictionary = {
    hello: "안녕하세요",
    world: "세계",
  }

• 제약 사항:
  • 시그니처 인덱스와 명시적 필드를 함께 사용하려면 Union 타입 필요:

    interface User {
      name: string;
      [key: string]: string | number;
    }

3. 타입 추론

• 타입스크립트가 문맥을 통해 변수나 함수의 타입을 추론.
• 필요시 타입 어노테이션으로 명시.
• 예시:

  
  const subtract = (a: number, b: number): number => a - b

4. Promise의 타입 지정

• API 호출 시 반환값의 타입 정의:

  
  async function fetchUser(): Promise<{ id: number; name: string }> {
      const response = await fetch("/api/user");
      return response.json();
  }

5. 제네릭(Generic)

• 타입을 함수나 클래스의 매개변수처럼 사용하여 유연한 코드 작성.
• 활용:

  1. 제네릭 함수:

     function getFirstElement<T>(arr: T[]): T {
         return arr[0];
     }

  2. 제네릭 인터페이스:

     
     interface Box<T> {
         value: T;
     

  3. 제네릭 클래스:

     class Stack<T> {
         private items: T[] = [];
         push(item: T): void {
             this.items.push(item);
         }
         pop(): T | undefined {
             return this.items.pop();
         }
     }

실용성 및 제한 사항

• 현대 프론트엔드 개발에서는 클래스 대신 함수형 프로그래밍과 Hook 기반 컴포넌트를 선호.
• Next.js와 같은 프레임워크에서 과도한 클래스 설계는 불필요한 복잡성을 초래할 수 있음.
• 복잡한 자료구조나 추상화를 구현하는 경우가 적으므로 함수 기반 솔루션이 적합.

배운 점

• never 타입과 시그니처 인덱스를 통해 타입 안정성을 강화할 수 있음.
• 제네릭은 코드의 유연성과 재사용성을 높이는 강력한 도구지만, 현대 프론트엔드 개발에서는 간결함을 유지하는 것이 중요.
• 타입스크립트의 타입 추론과 타입 어노테이션을 적절히 활용하면 코드의 가독성과 안전성을 동시에 높일 수 있음.