"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > TypeScript 마스터하기: 확장의 힘 이해하기

TypeScript 마스터하기: 확장의 힘 이해하기

2024-11-06에 게시됨
검색:273

Mastering TypeScript: Understanding the Power of extends

TypeScript의 확장 키워드는 일종의 스위스 군용 칼입니다. 상속, 제네릭 및 조건부 유형을 포함한 여러 컨텍스트에서 사용됩니다. 확장을 효과적으로 사용하는 방법을 이해하면 더욱 강력하고 재사용 가능하며 유형이 안전한 코드를 만들 수 있습니다.

확장을 사용한 상속

확장의 주요 용도 중 하나는 상속입니다. 이를 통해 기존 인터페이스나 클래스를 기반으로 새 인터페이스나 클래스를 만들 수 있습니다.

interface User {
  firstName: string;
  lastName: string;
  email: string;
}

interface StaffUser extends User {
  roles: string[];
  department: string;
}

const regularUser: User = {
  firstName: "John",
  lastName: "Doe",
  email: "[email protected]"
};

const staffMember: StaffUser = {
  firstName: "Jane",
  lastName: "Smith",
  email: "[email protected]",
  roles: ["Manager", "Developer"],
  department: "Engineering"
};

이 예에서 StaffUser는 User를 확장하여 모든 속성을 상속하고 새 속성을 추가합니다. 이를 통해 보다 일반적인 유형을 기반으로 보다 구체적인 유형을 만들 수 있습니다.

클래스 상속

extends 키워드는 클래스 상속에도 사용됩니다.

class Animal {
  constructor(public name: string) {}

  makeSound(): void {
    console.log("Some generic animal sound");
  }
}

class Dog extends Animal {
  constructor(name: string, public breed: string) {
    super(name);
  }

  makeSound(): void {
    console.log("Woof! Woof!");
  }

  fetch(): void {
    console.log(`${this.name} is fetching the ball!`);
  }
}

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.makeSound(); // Output: Woof! Woof!
myDog.fetch(); // Output: Buddy is fetching the ball!

여기서 Dog는 Animal을 확장하여 해당 속성과 메서드를 상속하고 자체 속성도 추가합니다.

제네릭의 유형 제약 조건

extends 키워드는 제네릭으로 작업할 때 매우 중요하며 제네릭 함수나 클래스와 함께 사용할 수 있는 유형을 제한할 수 있습니다.

interface Printable {
  print(): void;
}

function printObject(obj: T) {
  obj.print();
}

class Book implements Printable {
  print() {
    console.log("Printing a book.");
  }
}

class Magazine implements Printable {
  print() {
    console.log("Printing a magazine.");
  }
}

const myBook = new Book();
const myMagazine = new Magazine();

printObject(myBook);      // Output: Printing a book.
printObject(myMagazine);  // Output: Printing a magazine.
// printObject(42);       // Error, number doesn't have a 'print' method
  1. 인터페이스 Printable: 여기서는 Printable이라는 인터페이스를 정의합니다. 이 인터페이스는 이를 구현하는 모든 클래스가 준수해야 하는 계약을 선언합니다. 해당 계약은 Printable을 구현하는 모든 클래스가 인수를 사용하지 않고 void를 반환하는 print라는 메서드를 제공해야 함을 지정합니다.
  2. function printObject(obj: T): 이것은 printObject라는 일반 함수입니다. 이는 T 유형인 obj라는 단일 인수를 사용합니다. 유형 매개변수 T는 Printable 인터페이스를 확장(구현)하는 유형으로 제한되어 이 함수의 인수로 사용될 수 있습니다.
  3. Book 클래스는 Printable을 구현하고 Magazine 클래스는 Printable을 구현합니다. 여기서는 Book과 Magazine이라는 두 클래스를 정의합니다. 둘 다 Printable 인터페이스를 구현합니다. 즉, 이러한 클래스는 Printable 인터페이스의 계약에 따라 인쇄 메서드를 제공해야 합니다.
  4. const myBook = 새 책(); const myMagazine = new Magazine();: Book 및 Magazine 클래스의 인스턴스를 만듭니다.
  5. printObject(myBook); 및 printObject(myMagazine);: Book 및 Magazine의 인스턴스로 printObject 함수를 호출합니다. Book 및 Magazine 클래스는 모두 Printable 인터페이스를 구현하므로 T 확장 Printable 유형 매개변수의 제약 조건을 충족합니다. 함수 내에서 적절한 클래스의 인쇄 메소드가 호출되어 예상한 출력이 생성됩니다.
  6. // printObject(42);: 숫자 42와 같이 Printable 인터페이스를 구현하지 않는 유형으로 printObject를 호출하려고 하면 TypeScript에서 오류가 발생합니다. 이는 number 에 Printable 인터페이스에서 요구하는 인쇄 메소드가 없기 때문에 유형 제약 조건이 충족되지 않기 때문입니다.

요약하면 printObject(obj: T) 함수 컨텍스트의 확장 키워드는 인수로 사용된 T 유형이 Printable 인터페이스에서 정의한 계약을 준수하는지 확인하는 데 사용됩니다. 이렇게 하면 print 메소드가 있는 유형만 printObject 함수와 함께 사용할 수 있으며 함수 사용에 대한 특정 동작 및 계약이 적용됩니다.

조건부 유형

T extends U ? X : Y
  • T는 검사되는 유형입니다
  • U는 T가 확인되는 조건 유형입니다.
  • X는 T가 U를 확장하는 경우(할당 가능한 경우) 조건부 유형이 평가되는 유형입니다.
  • Y는 T가 U를 확장하지 않는 경우 조건부 유형이 평가되는 유형입니다.
type ExtractNumber = T extends number ? T : never;

type NumberOrNever = ExtractNumber; // number
type StringOrNever = ExtractNumber; // never

여기에서 ExtractNumber 유형은 유형 매개변수 T를 사용합니다. 조건부 유형은 T가 숫자 유형을 확장하는지 확인합니다. 그렇다면 유형은 T(숫자 유형)로 확인됩니다. 그렇지 않은 경우 유형은 never로 확인됩니다.

유니온 유형이 포함된 확장 키워드

이제 A | 비 | C는 A를 확장합니다. 처음에는 직관에 어긋나는 것처럼 보일 수 있지만 TypeScript에서는 이 조건이 실제로 false입니다. 이유는 다음과 같습니다.

  1. TypeScript에서 왼쪽에 공용체 유형이 있는 확장을 사용하는 경우 다음과 같이 묻는 것과 같습니다. "이 공용체에서 가능한 모든 유형을 오른쪽 유형에 할당할 수 있습니까?"
  2. 즉, A | 비 | C 확장 A는 다음과 같이 묻고 있습니다. "A를 A에 할당할 수 있고, B를 A에 할당할 수 있으며, C를 A에 할당할 수 있습니까?"
  3. A는 확실히 A에 할당될 수 있지만 B와 C는 A의 하위 유형이 아닌 한 A에 할당되지 않을 수 있으므로 전체 결과는 거짓입니다.
type Fruit = "apple" | "banana" | "cherry";
type CitrusFruit = "lemon" | "orange";

type IsCitrus = T extends CitrusFruit ? true : false;

type Test1 = IsCitrus; // true
type Test2 = IsCitrus; // false
type Test3 = IsCitrus; // false

이 예에서 IsCitrus는 Fruit Union의 모든 과일이 CitrusFruit가 아니기 때문에 false입니다.

모범 사례 및 팁

  • 의미 있는 관계를 위해 확장 사용: 유형 간에 명확한 "is-a" 관계가 있는 경우에만 상속을 사용하세요.
  • 상속보다 구성을 선호합니다: 많은 경우 구성(인터페이스 및 유형 교차 사용)이 클래스 상속보다 더 유연할 수 있습니다.
  • 심층 상속 체인에 주의하세요: 깊은 상속으로 인해 코드를 이해하고 유지 관리하기가 더 어려워집니다.
  • 유연한 API를 위한 조건부 유형 활용: 확장과 함께 조건부 유형을 사용하여 입력 유형에 따라 조정되는 API를 만듭니다.
  • 제네릭에서 확장을 사용하여 재사용 가능하고 유형이 안전한 함수 만들기: 이를 통해 유형 안전성을 유지하면서 다양한 유형에서 작동하는 함수를 작성할 수 있습니다.
릴리스 선언문 이 글은 https://dev.to/hasanm95/mastering-typescript-understanding-the-power-of-extends-1n2o?1에서 복제됩니다.1 침해 내용이 있는 경우, [email protected]으로 연락하여 삭제하시기 바랍니다.
최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3