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

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

확장을 사용한 상속

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

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

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

const regularUser: User = {
  firstName: "John",
  lastName: "Doe",
  email: "john@example.com"
};

const staffMember: StaffUser = {
  firstName: "Jane",
  lastName: "Smith",
  email: "jane@company.com",
  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<t extends printable>(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
</t>

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 인터페이스에서 정의한 계약을 준수하는지 확인하는 데 사용됩니다. 이렇게 하면 인쇄 메소드가 있는 유형만 printObject 함수와 함께 사용될 수 있으며 함수 사용에 대한 특정 동작 및 계약이 적용됩니다.

조건부 유형

T extends U ? X : Y

• T가 체크되는 타입입니다
• U는 T가 검사되는 조건 유형입니다.
• X는 T가 U를 확장(할당 가능)하는 경우 조건부 유형이 평가되는 유형입니다.
• Y는 T가 U를 확장하지 않는 경우 조건부 유형이 평가되는 유형입니다.

type ExtractNumber<t> = T extends number ? T : never;

type NumberOrNever = ExtractNumber<number>; // number
type StringOrNever = ExtractNumber<string>; // never
</string></number></t>

여기서 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> = T extends CitrusFruit ? true : false;

type Test1 = IsCitrus; // true
type Test2 = IsCitrus; // false
type Test3 = IsCitrus<fruit>; // false
</fruit></t>

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

모범 사례 및 팁

• 의미 있는 관계를 위해 확장 사용: 유형 간에 명확한 "is-a" 관계가 있는 경우에만 상속을 사용하세요.
• 상속보다 구성을 선호: 많은 경우 구성(인터페이스 및 유형 교차 사용)이 클래스 상속보다 더 유연할 수 있습니다.
• 깊은 상속 체인에 주의하세요: 깊은 상속으로 인해 코드를 이해하고 유지 관리하기가 더 어려워집니다.
• 유연한 API를 위한 조건부 유형 활용: 확장과 함께 조건부 유형을 사용하여 입력 유형에 따라 조정되는 API를 만듭니다.
• 제네릭에서 확장을 사용하여 재사용 가능하고 유형이 안전한 함수 만들기: 이를 통해 유형 안전성을 유지하면서 다양한 유형에서 작동하는 함수를 작성할 수 있습니다

위 내용은 TypeScript 마스터하기: 확장의 힘 이해하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!