TypeScript의 'window'에서 새 속성을 명시적으로 설정하려면 어떻게 해야 합니까?

TypeScript의 'window'에서 새 속성을 명시적으로 설정하려면 어떻게 해야 합니까?

하려면 , 「네임스페이스」의을 명시적으로 합니다.window.

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

는 TypeScript에 을 긋습니다.MyNamespace뭇매를 맞다

'MyNamespace' 속성이 'window' any" 유형의 값에 없습니다.

시키려면 , 「 」를 합니다.MyNamespace환경변수로서, 그리고 폐기한다.window노골적으로 말하고 싶진 않지만요.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

내가 어떻게 유지하지?windowTypeScript type type type type type type type type type type type?

가 「TypeScript」라고 것은, 「TypeScript」라고 을 알 수 에, .window은 「」입니다.any을 사용하다

다른 스택 오버플로우 질문의 답변에서 이에 대한 답을 찾았습니다.

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

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

기존의 ''을 확장해야 .window propertyinterface에 합니다.

동적 상태를 유지하려면 다음을 사용하십시오.

(<any>window).MyNamespace

는 「TSX」라고 이 있기 에, 에 주의해 .<any>는 TSX 요소입니다.TSX와 호환되는 유형 어설션에 대해서는 이 답변을 확인하십시오.

Svelte 또는 TSX를 사용하십니까?다른 대답들은 모두 나에게 효과가 없었다.

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

(window as any).MyNamespace

TypeScript ^3.4.3 이후 이 솔루션은 더 이상 작동하지 않습니다.

아니면...

다음과 같이 입력합니다.

window['MyNamespace']

컴파일 않고 ' 에러'를 하는 것과 하게 동작합니다.window.MyNamespace.

글로벌은 「악」입니다:) 휴대성을 갖추는 가장 좋은 방법은, 다음과 같습니다.

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

export interface CustomWindow extends Window {
    customAttribute: any;
}

둘째, Import

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

세 번째로 Custom Window를 사용하여 글로벌 변수 창을 캐스팅합니다.

declare let window: CustomWindow;

이와 같이 창 객체의 기존 속성과 함께 사용할 경우 다른 IDE에 빨간색 선이 표시되지 않으므로 마지막에 다음을 시도해 보십시오.

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

TypeScript 2.4.x 이후 테스트 완료!

Angular CLI를 사용하는 사용자는 다음과 같이 간단합니다.

파일 src/polyfiles.ts

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

my-custom-utils.ts 파일

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

IntelliJ IDEA 를 사용하고 있는 경우는, 새로운 폴리필을 선택하기 전에, IDE 의 다음의 설정도 변경할 필요가 있습니다.

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

TypeScript 0.9는하지 않게 .** 더 * * * * * * * * * * * * * * 。의 Window인터페이스는 기본 제공 정의를 확대하는 것이 아니라 완전히 대체하는 것 같습니다.

대신 이 작업을 수행하게 되었습니다.

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

declare var window: MyWindow;

업데이트: TypeScript 0.9.5에서 승인된 답변이 다시 작동합니다.

「 」를 할 가 있는 window 오브젝트에서는, 「」를 할 가 있습니다.import 해서 ' 하다, 하다, 하다'라는 방법을 할 수

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

핸드북의 '선언 병합' 섹션에서 글로벌 증강을 참조하십시오.

하다라는 을 만들어 보세요.global.d.ts ,190),/src/@types/global.d.ts다음으로 다음과 같은 인터페이스를 정의합니다.

interface Window {
  myLib: any
}

레퍼런스: Global .d.ts

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

• 그들 중 몇몇은 단지 보여주기 위해 형식 추론을 억누르고 있다.
• 그 외의 일부에서는 글로벌 변수에는 네임스페이스만 사용하고 인터페이스/클래스는 사용하지 않습니다.

오늘 아침에도 비슷한 문제가 발생했습니다.Stack Overflow에서 많은 "솔루션"을 시도했지만 유형 오류가 전혀 발생하지 않았고 IDE(WebStorm 또는 Visual Studio Code)에서 트리거 유형 점핑이 활성화되지 않았습니다.

마지막으로 모듈 정의를 글로벌 변수 #3180으로 선언할 수 있습니다.

인터페이스/클래스 및 네임스페이스 역할을 하는 글로벌 변수의 타이핑을 첨부할 수 있는 합리적인 솔루션을 찾았습니다.

다음은 예를 제시하겠습니다.

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

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

는 네임스페이스의 을 병합한 입니다.MyNamespace 인터페이스 " " " "MyNamespace " " "로 변환됩니다.myNamespace(창의 속성).

나는 이것을 자주 할 필요가 없다.미들웨어와 함께 Redux DevTools를 사용하는 경우가 유일합니다.

저는 그냥 했어요:

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

또는 다음을 수행할 수 있습니다.

let myWindow = window as any;

다음에 ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ.myWindow.myProp = 'my value';

3는 "TypeScript"를 지원하게 .globalThis. globalThis 유형 확인을 참조하십시오.

위의 링크에서:

// in a global file:
var abc = 100;
// Refers to 'abc' from above.
globalThis.abc = 200;
window.abc = 300; // window object can also be used.

놀이터.

global" 은 "global" "Import 문이 입니다. 선언은var abc;.d.ts로 쓸 수 있습니다.

이 페이지에서 답을 찾으면 도움이 될 것 같습니다.

글로벌 증강

선언 병합의 역사에 대해서는 잘 모르겠지만, 다음과 같은 것이 왜 효과가 있었는지 설명된다.

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

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

을 사용하여 은 create-react-app v3를 이었습니다.3을 사용하여 이를 실현하는 가장 쉬운 방법은 다음과 같습니다.Window 생성하다react-app-env.d.ts:

interface Window {
    MyNamespace: any;
}

TypeScript는 문자열 속성에 대해 형식 검사를 수행하지 않습니다.

window["newProperty"] = customObj;

이상적으로는 글로벌 변수 시나리오는 피해야 합니다.브라우저 콘솔에서 개체를 디버깅할 때 사용할 수 있습니다.

3.를 TypeScript 3.x 를 할 수 .declare global다른 답변에 포함시키고 대신 다음을 사용합니다.

interface Window {
  someValue: string
  another: boolean
}

이것은 TypeScript 3.3, Webpack, TSLint를 사용할 때 도움이 되었습니다.

사용.

window["MyNamespace"] = window["MyNamespace"] || {};

는 문자열 속성을 사용하고 있기 때문에 문제 없습니다.단, 분리된 창을 가지고 코드를 정리하고 싶다면 창 객체를 확장할 수 있습니다.

interface MyNamespacedWindow extends Window {
    MyNamespace: object;
}

declare var window: MyNamespacedWindow;

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 || {};

// In typings.d.ts(is Global)
export declare global {
    interface Window {
        __PUBLIC__: string;
    }
}

먼저 현재 범위에서 window 객체를 선언해야 합니다.왜냐하면 TypeScript는 객체의 유형을 알고 싶어하기 때문입니다.창 개체는 다른 위치에 정의되어 있으므로 재정의할 수 없습니다.

단, 다음과 같이 선언할 수 있습니다.

declare var window: any;

로 인해 , 이름이 "New"인 .window즉, 창이 다른 곳에 정의되어 있으며 현재 범위에서 참조하고 있을 뿐입니다.

다음으로 My Namespace 객체를 참조할 수 있습니다.

window.MyNamespace

새로운 해 놓을 도 있습니다.window순음음 음 음 음 、 음 음 음 、 음 음 다 、

window.MyNamespace = MyObject

이제 TypeScript는 불평하지 않습니다.

참고로 (이것이 정답입니다)

의 내부.d.ts 파일( file)

type MyGlobalFunctionType = (name: string) => void

브라우저에서 작업할 경우, Window의 인터페이스를 다시 열어 브라우저의 창 컨텍스트에 구성원을 추가합니다.

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Node.js에 대해서도 같은 생각입니다.

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

다음으로 루트 변수(실제로 window 또는 global에 존재함)를 선언합니다.

declare const myGlobalFunction: MyGlobalFunctionType;

후, 의 럼럼 then then then .ts파일이지만 부수적인 효과로 Import된 파일은 실제로 구현됩니다.

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

마지막으로 코드베이스의 다른 곳에서 다음 중 하나를 사용하여 사용합니다.

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

myGlobalFunction("Kevin");

[2022]:React 또는 Nextjs 프로젝트에서 "창" 개체를 확장해야 합니다.이 문제를 해결하려면 다음 단계를 수행합니다.

• src 폴더 이름 내에 폴더를 유형으로 만듭니다.

• 파일 내부 형식 폴더 이름을 index.d.ts로 만듭니다.

• 이 코드를 index.d.ts 파일에 씁니다.

  export {};
   declare global {
     interface Window {
      NameSpace: any;
     }
  
   }
   window.NameSpace= window.NameSpace|| {};
  

이 파일을 저장합니다.

이제 마지막 변경입니다.

노드 모듈 유형과 유형을 모두 상속하도록 "tsConfig.json" 파일을 변경합니다.

{
  "compilerOptions": {
   ...
    "typeRoots": [
      "./node_modules/@types",
      "./src/types"
    ],
 ....
}

완전한 답변과 짧은 답변

추가 1- 추가typeRoots을 property property로 설정합니다.tsconfig.json:

{
  "compilerOptions": {
    ...
    "typeRoots": ["src/@types", "node_modules/@types"]
    ...
  }
}

- 내선2 - 내선2 - 내선2Window

// file: src/@types/global.d.ts

declare global {
    interface Window { customProperty: <type>; }
}

창을 확장하는 사용자 지정 인터페이스를 만들고 사용자 지정 속성을 옵션으로 추가합니다.

그럼, 커스텀은Window는 커스텀인터페이스를 사용하지만 원래 창에서는 가치가 있습니다.

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]

(window as { test: string } & Window & typeof globalThis).test = `Hello World`;

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

이 선언문을 는 '', '문헌'을 사용해야 했습니다d.ts글로벌 개체의 새 속성을 선언하는 파일의 확장자를 지정합니다.

결국 이 파일은 다음과 같은 결과를 낳았습니다.

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

, 자신의 단단 your, your your your your your your your 해 주세요.public_api.ts.

그걸로 끝이야.

TypeScript에 이미 하지 않고 객체에 수 없도록 .any옵션 체인을 사용할 수 있습니다.

window?.MyNamespace =  'value'

신고하지 않고 사용합니다.예시는 다음과 같습니다.

언급URL : https://stackoverflow.com/questions/12709074/how-do-you-explicitly-set-a-new-property-on-window-in-typescript