TypeScript의`window`에서 새 속성을 어떻게 명시 적으로 설정합니까?

에 속성을 명시 적으로 설정하여 객체의 전역 네임 스페이스를 설정합니다 window.

window.MyNamespace = window.MyNamespace || {};

TypeScript는 다음을 강조 MyNamespace하고 다음과 같이 불평합니다.

'창 이름'유형의 값에 'MyNamespace'특성이 없습니다. "

MyNamespace주변 변수로 선언 하고 window명시 성을 삭제 하여 코드를 작동시킬 수 있지만 그렇게하고 싶지 않습니다.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

어떻게 window거기에 머무르고 TypeScript를 행복하게 할 수 있습니까?

부수적으로 TypeScript는 그것이 무엇이든 포함 할 수있는 window유형 이라고 알려주기 때문에 TypeScript가 불평하는 것이 특히 재미 있다는 것을 알았습니다 any.

다른 StackOverflow question 's answer 에서 이에 대한 답변을 찾았습니다 .

declare global {
    interface Window { MyNamespace: any; }
}

window.MyNamespace = window.MyNamespace || {};

기본적으로 기존 window속성 을 확장 하여 새 속성에 대해 알려야합니다.

동적으로 유지하려면 다음을 사용하십시오.

(<any>window).MyNamespace

TYPESCRIPT 기준 ^ 3.4.3이 솔루션은 더 이상 작동하지 않습니다

또는...

당신은 입력 할 수 있습니다 :

window['MyNamespace']

컴파일 오류가 발생하지 않으며 입력과 동일하게 작동합니다. window.MyNamespace

TSX를 사용하십니까? 다른 답변들 중 어느 것도 나를 위해 일하지 않았습니다.

내가 한 일은 다음과 같습니다.

(window as any).MyNamespace

받아 들인 대답은 내가 사용했던 것이지만 TypeScript 0.9. *에서는 더 이상 작동하지 않습니다. Window인터페이스 의 새로운 정의는 기능 을 보강하는 대신 내장 정의를 완전히 대체하는 것으로 보입니다.

대신이 작업을 수행했습니다.

interface MyWindow extends Window {
    myFunction(): void;
}

declare var window: MyWindow;

업데이트 : TypeScript 0.9.5에서 허용되는 답변이 다시 작동합니다.

글로벌은 "악"입니다 :), 또한 이식성을 갖는 가장 좋은 방법은 다음과 같습니다.

먼저 인터페이스를 내 보냅니다 (예 : ./custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

두 번째로 수입

import {CustomWindow} from './custom.window.ts';

CustomWindow를 사용하여 세 번째 캐스트 전역 변수 창

declare let window: CustomWindow;

이런 식으로 window 객체의 기존 속성과 함께 사용하는 경우 다른 IDE에 빨간색 선이 없으므로 결국 시도하십시오.

window.customAttribute = 'works';
window.location.href = '/works';

Typescript 2.4.x 이상에서 테스트되었습니다!

사용해야 window하는 사용자 지정 유형으로 개체 를 확장해야하는 경우 import다음 방법을 사용할 수 있습니다.

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

핸드북의 '신고 병합'섹션에서 '전 세계 확대'를 참조하십시오 : https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation

Angular CLI를 사용하는 사람들에게는 간단합니다.

src / polyfills.ts

declare global {
  interface Window {
    myCustomFn: () => void;
  }
}

my-custom-utils.ts

window.myCustomFn = function () {
  ...
};

IntelliJ를 사용하는 경우 새 폴리 필을 가져 오기 전에 IDE에서 다음 설정을 변경해야합니다.

> File 
> Settings 
> Languages & Frameworks 
> TypeScript 
> check 'Use TypeScript Service'.

이 작업을 자주 수행 할 필요는 없습니다. 미들웨어와 함께 Redux Devtools를 사용할 때 유일한 경우였습니다.

나는 단순히했다 :

const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

아니면 할 수 있습니다 :

let myWindow = window as any;

그리고 myWindow.myProp = 'my value';

다른 답변의 대부분은 완벽하지 않습니다.

• 그들 중 일부는 상점의 유형 유추를 억제합니다.
• 다른 것들 중 일부는 네임 스페이스로서의 전역 변수에만 관심이 있지만 인터페이스 / 클래스는 아닙니다.

오늘 아침에도 비슷한 문제가 발생합니다. SO에서 너무 많은 "솔루션"을 시도했지만 그중 어느 것도 절대 유형 오류가 발생하지 않으며 IDE (webstorm 또는 vscode)에서 유형 점프 트리거링을 활성화하지 않습니다.

마지막으로 여기에서

https://github.com/Microsoft/TypeScript/issues/3180#issuecomment-102523512

인터페이스 / 클래스 및 네임 스페이스 역할을하는 전역 변수에 대한 입력 을 첨부 하는 합리적인 솔루션을 찾았습니다. .

예는 다음과 같습니다.

// typings.d.ts
declare interface Window {
    myNamespace?: MyNamespace & typeof MyNamespace
}

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

위의 코드는 네임 스페이스 MyNamespace와 인터페이스 MyNamespace의 입력을 전역 변수 myNamespace(창의 속성)에 병합합니다 .

주변에서 답변을 찾은 후이 페이지가 도움이 될 것으로 생각합니다. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation 선언 병합 이력은 확실하지 않지만 다음이 작동하는 이유를 설명합니다.

declare global {
    interface Window { MyNamespace: any; }
}

window.MyNamespace = window.MyNamespace || {};

TypeScript Definition Manager를 사용하는 경우이를 수행하는 방법은 다음과 같습니다 .

npm install typings --global

작성 typings/custom/window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

사용자 정의 입력을 설치하십시오.

typings install file:typings/custom/window.d.ts --save --global

완료 하세요! Typescript는 더 이상 불평하지 않습니다.

window.MyNamespace = window.MyNamespace || {};

Typscript는 문자열 속성에 대한 유형 검사를 수행하지 않습니다.

window["newProperty"] = customObj;

이상적으로는 전역 변수 시나리오를 피해야합니다. 때로는 브라우저 콘솔에서 객체를 디버깅하는 데 사용합니다.

global.d.tseg 라는 파일을 만들고 /src/@types/global.d.ts다음과 같은 인터페이스를 정의하십시오.

interface Window {
  myLib: any
}

심판 : https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-d-ts.html

Typescript 3.x를 사용하는 경우 declare global다른 답변에서 해당 부분 을 생략 하고 대신 다음을 사용할 수 있습니다.

interface Window {
  someValue: string
  another: boolean
}

Typescript 3.3, WebPack 및 TSLint를 사용할 때 나와 함께 일했습니다.

참고로 (정답입니다) :

.d.ts정의 파일 내부

type MyGlobalFunctionType = (name: string) => void

브라우저에서 작업하는 경우 Window 인터페이스를 다시 열어 브라우저의 창 컨텍스트에 멤버를 추가하십시오.

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

NodeJS에 대한 동일한 아이디어 :

declare module NodeJS {
  interface Global {
    myGlobalFunction: MyGlobalFunctionType
  }
}

이제 루트 변수를 선언합니다 (실제로 창 또는 전역에 있음)

declare const myGlobalFunction: MyGlobalFunctionType;

그런 다음 일반 .ts파일에서 부작용으로 가져 오면 실제로 구현합니다.

global/* or window */.myGlobalFunction = function (name: string) {
  console.log("Hey !", name);
};

마지막으로 코드베이스의 다른 곳에서 사용하십시오.

global/* or window */.myGlobalFunction("Kevin");

myGlobalFunction("Kevin");

사용자 정의 인터페이스가 창을 확장하고 사용자 정의 특성을 선택 사항으로 추가하십시오.

그런 다음 사용자 정의 인터페이스를 사용하지만 원래 창으로 값을 지정하는 customWindow를 사용하십시오.

typescript@3.1.3과 함께 작동했습니다.

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

window객체 에 계산 또는 동적 속성을 설정하려는 사람들에게는 declare global메소드로 불가능하다는 것을 알 수 있습니다 . 이 사용 사례를 명확히하려면

window[DynamicObject.key] // Element implicitly has an 'any' type because type Window has no index signature

이런 식으로 시도 할 수 있습니다

declare global {
  interface Window {
    [DyanmicObject.key]: string; // error RIP
  }
}

위의 오류는 발생합니다. 이것은 Typescript에서 인터페이스가 계산 된 속성과 잘 작동하지 않아서

A computed property name in an interface must directly refer to a built-in symbol

이 문제를 해결하기 위해, 당신은 주조의 제안으로 갈 수 window에 <any>당신이 할 수 있도록

(window as any)[DynamicObject.key]

create-react-app v3.3을 사용하여 이것을 달성하는 가장 쉬운 방법 Window은 자동 생성 유형 을 확장하는 것입니다 react-app-env.d.ts.

interface Window {
    MyNamespace: any;
}

먼저 현재 범위에서 창 개체를 선언해야합니다.
typescript가 객체의 유형을 알고 싶어하기 때문입니다.
창 개체가 다른 곳에 정의되어 있으므로 재정의 할 수 없습니다.
그러나 다음과 같이 선언 할 수 있습니다.

declare var window: any;

이것은 창 개체를 재정의하지 않거나 name을 가진 다른 변수를 만들지 않습니다 window.
이것은 창이 다른 곳에 정의되어 있으며 현재 범위에서 참조하고 있음을 의미합니다.

그런 다음 간단히 다음과 같이 MyNamespace 객체를 참조 할 수 있습니다.

window.MyNamespace

또는 다음과 같이 window간단하게 객체 의 새 속성을 설정할 수 있습니다 .

window.MyNamespace = MyObject

그리고 이제 타이프 스크립트가 불평하지 않습니다.

오늘 Angular (6) 라이브러리에서 이것을 사용하고 싶었고 예상대로 작동하는 데 시간이 걸렸습니다.

내 라이브러리가 선언을 사용하려면 d.ts 하려면 전역 객체의 새로운 속성을 선언하는 파일 확장자 .

결국 파일은 다음과 같이 끝났습니다.

/path-to-angular-workspace/angular-workspace/projects/angular-library/src/globals.d.ts

일단 생성되면, 그것을 노출시키는 것을 잊지 마십시오 public_api.ts .

그것은 나를 위해 그것을했다. 도움이 되었기를 바랍니다.