TypeScript 확장 창

1. TypeScript window 개체
2. TypeScript의 Window 개체에서 새 속성 선언
3. TypeScript에서 인터페이스 선언 병합

이 기사는 TypeScript window를 확장하는 방법을 보여줍니다.

TypeScript window 개체

window은 브라우저에 정의된 내장 객체입니다. DOM 문서를 포함하는 window 객체입니다.

브라우저 window 개체와 관련된 속성 및 기능에 액세스해야 할 수도 있습니다. 내장 window 객체는 즉시 사용할 수 있는 많은 유용한 속성과 기능을 제공합니다.

자주 사용되는 window 개체 속성 및 기능 중 일부는 다음과 같습니다.

1. 속성: EventTarget, document, console, event, localStorage, onLoad 등
2. 메소드: addEventListener, fetch, alert, atob, btoa, open, prompt, print 등

일반적으로 TypeScript는 다른 모듈에서 해당 유형을 정의합니다. 따라서 window 유형은 lib.dom 모듈에서 정의됩니다.

일부 시나리오에서는 기본 제공 메서드 및 속성이 충분하지 않습니다. TypeScript 프로젝트에서 Google 애널리틱스 또는 태그 관리자 라이브러리를 사용할 때마다 이러한 스크립트가 코드에서 로드되지 않을 수 있습니다.

따라서 window 개체 속성 및 메서드를 통해 타사 도구와 통신할 방법이 필요합니다.

TypeScript의 Window 개체에서 새 속성 선언

JavaScript에서 내장 window 객체에서 새 속성이나 메서드를 선언하는 것은 매우 간단합니다. 다음과 같은 방법을 사용하여 JavaScript로 window 객체에 새 속성을 정의할 수 있습니다.

window.myProp = 'newly declared property';
window['myProp'] = 'newly declared property';

브라우저 콘솔에서 window 개체를 살펴보겠습니다.

console.log(window);

출력:

TypeScript에서는 위의 접근 방식이 작동하지 않습니다. JavaScript에서와 같이 window 객체에 새 속성을 선언하려고 하면 다음과 같이 TypeScript에서 오류가 발생합니다.

window.anotherNewProp = 'this is a property on window object in typescript';

출력:

일반적으로 TypeScript 객체 유형은 클래스 또는 인터페이스를 기반으로 합니다. 다음과 같이 Animal이라는 클래스가 있다고 가정해 보겠습니다.

class Animal {
    name: string;
    color: string;
}

Animal 개체를 만들고 name 및 color 속성에 일부 값을 할당해 보겠습니다.

class Animal {
    name: string;
    color: string;
}

let newAnimal = new Animal();

newAnimal.name = 'lion';
newAnimal.color = 'grey';

위의 코드는 문제 없이 컴파일됩니다.

다음으로 동일한 Animal 개체에 대해 numberOfLegs 속성을 선언하고 값을 할당하려고 합니다.

class Animal {
    name: string;
    color: string;
}

let newAnimal = new Animal();

newAnimal.name = 'lion';
newAnimal.color = 'grey';
newAnimal.numberOfLegs = 4;

오류가 발생합니다. TypeScript에서는 이와 같은 새 개체 속성을 선언할 수 없습니다.

이를 해결하려면 먼저 Animal 클래스에 numberOfLegs 속성을 추가해야 합니다.

이것은 내장 window 개체에서도 동일한 문제입니다. 주요 관심사는 TypeScript window 객체가 스스로 생성되지 않는다는 것입니다.

그것은 브라우저와 함께 제공됩니다. 따라서 이 내장 객체에 속성을 추가하는 적절한 방법이 필요합니다.

TypeScript에서 인터페이스 선언 병합

TypeScript는 기본적으로 선언 병합 기술을 지원합니다. 선언 병합의 가장 간단한 유형은 인터페이스 병합입니다.

여러 인터페이스가 같은 이름으로 선언될 때마다 TypeScript는 모든 인터페이스 선언을 하나로 병합합니다.

내장 window 개체는 TypeScript window 인터페이스를 기반으로 합니다. 따라서 TypeScript 인터페이스 병합 기술을 사용하여 내장 인터페이스에 새 속성을 추가할 수 있습니다.

window라는 새 인터페이스를 만들어 보겠습니다.

interface Window {
    myProp: string;
}

다음으로 window 개체의 myProp 속성에 액세스하려고 합니다.

interface Window {
    myProp: string;
}

window.myProp = 'typescript window object property';

출력:

이번에는 TypeScript 컴파일러에서 제기된 문제가 없습니다. 유형을 고려한다면 window 개체에서 새 속성이나 메서드를 정의하는 것이 좋습니다.

유형에 대한 문제가 없는 경우 다음 구문을 사용하여 window 개체에 대한 새 속성을 선언할 수 있습니다.

(<any>.window).myProp = 'typescript property on window object';

함수를 선언할 수도 있습니다.

(<any>.window).NewFunction = () => {
    console.log('new function on window object');
}

두 기술 모두 TypeScript와 함께 사용하여 window 개체에 새 속성이나 메서드를 추가할 수 있습니다. 선택은 상황에 따라 귀하의 몫입니다.