Typescript에서 선언 병합이란 무엇입니까?

TypeScript에서 선언 병합이란 무엇입니까?



  • 설명:

    TypeScript에서 값, 유형 및 네임스페이스는 하나의 형식으로 서로 쌓일 수 있습니다.
    단일 엔티티이며 단일 식별자로 내보냅니다.


  • 💡Namespace-creating declarations create a namespace, which contains names
    that are accessed using a dotted notation. Type-creating declarations do just that:
    they create a type that is visible with the declared shape and bound to the given
    name. Lastly, value-creating declarations create values that are visible in the output
    JavaScrip




    선언 유형
    네임스페이스
    유형



    네임스페이스
    엑스

    엑스

    유형 별칭

    엑스

    상호 작용

    엑스

    수업

    엑스
    엑스

    열거형

    엑스
    엑스

    기능

    엑스

    변하기 쉬운

    엑스



  • 인터페이스 병합

    인터페이스는 typescript에서 가장 일반적인 선언 병합 유형이며, 선언된 인터페이스 유형의 멤버는 단일 인터페이스로 병합되고 단일 식별자가 할당됩니다.

    interface User{
        id: number;
        name: string;
        job: string;
        salary: string;
    }
    
    interface User {
        gender: string;
        isMarried: boolean;
    
    }
    
    const user: User = {
    id: 3, 
    name: "Abdul Shakur", 
    job: "software developer",                          
    salary: $4000, 
    gender: "male", 
    isMarried: true 
    }   
    

    참고: 병합 시 마지막 인터페이스가 항상 가장 높은 우선 순위를 갖습니다.

    For function members, each function member of the same name is treated as
    describing an overload of the same function. Of note, too, is that in the case of
    interface A merging with later interface A, the second interface will have higher
    precedence than the first.


    interface Document {
      createElement(tagName: any): Element;
    }
    interface Document {
      createElement(tagName: "div"): HTMLDivElement;
      createElement(tagName: "span"): HTMLSpanElement;
    }
    interface Document {
      createElement(tagName: string): HTMLElement;
      createElement(tagName: "canvas"): HTMLCanvasElement;
    }   
    
    Document의 병합된 선언은 다음과 같습니다.

    interface Document {
      createElement(tagName: "canvas"): HTMLCanvasElement;
      createElement(tagName: "div"): HTMLDivElement;
      createElement(tagName: "span"): HTMLSpanElement;
      createElement(tagName: string): HTMLElement;
      createElement(tagName: any): Element;
    }
    


  • 네임스페이스 병합

    이름이 같은 네임스페이스는 구성원을 병합하고 단일 엔터티로 내보냅니다. 네임스페이스가 네임스페이스와 값을 생성한다는 것을 이해해야 합니다.
    namespaces를 병합하기 위해 각 네임스페이스에서 선언된 유형 정의 내보낸 인터페이스가 자체적으로 병합되어 병합된 유형 정의가 포함된 단일 네임스페이스를 형성합니다.

    이름이 같은 네임스페이스가 이미 존재하면 namespace value,를 병합하기 위해 typescript는 기존 네임스페이스를 유지하고 동일한 이름을 가진 후속 네임스페이스의 구성원을 첫 번째 네임스페이스에 추가하여 확장합니다.

    코드 예:

    namespace UsersDB{
      export class AdminUser {}
    }
    
    namespace UsersDB {
    
    // un-exported type declaration
    interface Staff {
      staffID: number;
      name: string;
      role: string[];
      salary?: string;
      department: string;
    
    }
    
    // exported type declaratio
     export interface User {
      id: number;
      name: string;
      job: string;
      salary: string;
     }
    
    // exported type declaration
     export class ClientUser{}
    
    }
    

    This model of namespace merging is a helpful starting place, but we also need to understand what happens with non-exported members. Non-exported members are only visible in the original (un-merged) namespace. This means that after merging, merged members that came from other declarations cannot see non-exported members.



    위의 코드 스니펫이 병합되면 아래 코드가 결과가 됩니다.

    namespace UsersDB {
      export interface User {
        id: number;
        name: string;
        job: string;
        salary: string;
      }
      export class AdminUser {}
      export class ClientUser {}
    
    }
    


  • 네임스페이스를 클래스와 병합

    TS Compiler는 이름이 같은 클래스와 네임스페이스의 구성원을 병합합니다. 멤버는 병합된 형식 선언에서 인식되도록 다른 형식으로 내보내야 합니다.

    class ClientsDB {
      client!: ClientsDB.ClientName;
    }
    
    namespace ClientsDB {
      export class ClientName{
    
      }
    }
    


  • Merging Namespaces with function

    다음과 같이 "스택"되는 함수 및 네임스페이스를 정의할 수 있습니다. $동시에 직접 호출할 수 있으며 다음과 같은 것에 대한 네임스페이스 역할을 할 수 있습니다.
    $.ajax , $.getJSON 등…

    function $(selector: string): NodeListOf<Element> {
      return document.querySelectorAll(selector)
    }
    namespace $ {
      export function ajax(arg: {
        url: string
        data: any
        success: (response: any) => void
      }): Promise<any> {
        return Promise.resolve()
      }
    }
    

  • 좋은 웹페이지 즐겨찾기