[typescript] TypeScript에서 전역 변수 만들기

JavaScript에서는 다음과 같이 할 수 있습니다.

 something = 'testing';

그리고 다른 파일에서 :

 if (something === 'testing')

something(올바른 순서로 호출되는 한) 정의 될 것 입니다.

TypeScript에서 수행하는 방법을 알아낼 수없는 것 같습니다.

이것이 내가 시도한 것입니다.

.d.ts 파일에서 :

interface Window { something: string; }

그런 다음 내 main.ts 파일에서 :

 window.something = 'testing';

그런 다음 다른 파일에서 :

 if (window.something  === 'testing')

그리고 이것은 작동합니다. 그러나 나는 window.그것 의 일부 를 잃고 단지 내가 something글로벌 이 되기를 원합니다 . TypeScript에서 수행하는 방법이 있습니까?

(관심이있는 사람이있는 경우 애플리케이션에 대한 로깅을 설정하려고 log.Debug합니다. 개체를 가져 와서 만들지 않고도 모든 파일에서 호출 할 수 있기를 원합니다 .)



답변

좋아요, 이건 당신이했던 것보다 더 못 생겼 겠지만 어쨌든 …

하지만 나도 똑같이 …

순수한 TypeScript에서 할 수있는 일은 다음 eval과 같은 함수 를 사용하는 것입니다.

declare var something: string;
eval("something = 'testing';")

그리고 나중에 할 수 있습니다

if (something === 'testing')

이것은 TypeScript가 컴파일을 거부하지 않고 명령을 강제 실행하는 해킹 declare var에 지나지 않으며 TypeScript가 나머지 코드를 컴파일하도록합니다.


답변

.d.ts정의 파일 내부

type MyGlobalFunctionType = (name: string) => void

브라우저에서 작업하는 경우 브라우저의 창 컨텍스트에 멤버를 추가합니다.

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");


답변

global 이것은 미래입니다.

첫째, TypeScript 파일에는 두 가지 종류의 scopes

글로벌 범위

파일에 import또는 exportline 이없는 경우이 파일은 모든 선언이이 파일 외부에 표시 되는 전역 범위 에서 실행 됩니다.

따라서 다음과 같은 전역 변수를 생성합니다.

// xx.d.ts
declare var age: number

// or 
// xx.ts
// with or without declare keyword
var age: number

// other.ts
globalThis.age = 18 // no error

모든 마법은 var. 교체 var와 함께 let또는 const작동하지 않습니다.

모듈 범위

파일에 import또는 exportline 이있는 경우이 파일은 declaration-merging으로 전역 확장해야하는 자체 범위 내에서 실행됩니다 .

// xx[.d].ts
declare global {
  var age: number;
}

// other.ts
globalThis.age = 18 // no error

공식 문서 에서 모듈에 대한 자세한 내용을 볼 수 있습니다.


답변

이것이 내가 수정 한 방법입니다.

단계 :

  1. 다음과 같이 custom.d.ts와 같은 전역 네임 스페이스를 선언했습니다.
declare global {
    namespace NodeJS {
        interface Global {
            Config: {}
        }
    }
}
export default global;
  1. 위에서 생성 한 파일을 아래와 같이 “tsconfig.json”에 매핑합니다.
"typeRoots": ["src/types/custom.d.ts" ]
  1. 아래와 같이 파일에서 위에서 만든 전역 변수를 가져옵니다.
console.log(global.config)

노트 :

  1. 타이프 스크립트 버전 : “3.0.1”.

  2. 필자의 경우 요구 사항은 응용 프로그램을 부팅하기 전에 전역 변수를 설정하는 것이었고 변수는 필요한 구성 속성을 얻을 수 있도록 종속 개체 전체에 액세스해야합니다.

도움이 되었기를 바랍니다!

감사합니다


답변

TypeScript와 결합 된 JavaScript를 사용하면 작동하는 방법을 찾았습니다.

logging.d.ts :

declare var log: log4javascript.Logger;

로그 선언. js :

log = null;

initalize-app.ts

import './log-declaration.js';

// Call stuff to actually setup log.  
// Similar to this:
log = functionToSetupLog();

이것은 그것을 전역 범위에 놓고 TypeScript는 그것에 대해 알고 있습니다. 그래서 모든 파일에서 사용할 수 있습니다.

참고 : allowJsTypeScript 옵션을 true로 설정 했기 때문에 이것이 작동한다고 생각 합니다.

누군가 순수한 TypeScript 솔루션을 게시하면 동의합니다.


답변

이것 만 사용하는 메신저

import {globalVar} from "./globals";
declare let window:any;
window.globalVar = globalVar;


답변

적절한 방법을 찾기 위해 몇 시간을 보냈습니다. 제 경우에는 전역 “로그”변수를 정의하려고하므로 단계는 다음과 같습니다.

1) tsconfig.json정의 된 유형을 포함 하도록 구성하십시오 ( src/typesfolder, node_modules-당신에게 달려 있습니다) :

...other stuff...
"paths": {
  "*": ["node_modules/*", "src/types/*"]
}

2) src/types/global.d.ts다음 내용으로 파일 을 생성하십시오 ( 가져 오기 없음! -중요합니다). any필요에 맞게 변경 하고 브라우저로 작업하는 window대신 인터페이스를 사용하십시오 NodeJS.

/**
 * IMPORTANT - do not use imports in this file!
 * It will break global definition.
 */
declare namespace NodeJS {
    export interface Global {
        log: any;
    }
}

declare var log: any;

3) 이제 마지막으로 log필요한 곳에 사용 / 구현할 수 있습니다 .

// in one file
global.log = someCoolLogger();
// in another file
log.info('hello world');
// or if its a variable
global.log = 'INFO'