TypeScript의 전역 변수

1. TypeScript에서 새 프로젝트 만들기
2. 글로벌 객체란?
3. TypeScript에서 전역 변수 선언
4. TypeScript에서 전역 변수에 액세스
5. 결론

TypeScript 문서는 전역 라이브러리를 전역 범위에서 액세스되는 모듈로 정의하며, 멤버에 액세스하기 위해 import 키워드를 사용하지 않는 경우 일반적으로 전역 범위를 사용하고 있음을 알고 있습니다.

전역 라이브러리에는 전역 변수, 인터페이스, 네임스페이스 및 애플리케이션에서 다른 모듈이 액세스할 수 있는 기타 선언이 포함되어 있습니다. 이 튜토리얼은 TypeScript에서 전역 변수를 만들고 다른 파일에서 액세스하는 방법을 알려줍니다.

TypeScript에서 새 프로젝트 만들기

WebStorm IDEA를 열고 파일 > 새로 만들기 > 프로젝트를 선택합니다. 열리는 창에서 왼쪽의 Node.js를 선택하고 Location 섹션에서 프로젝트 이름을 untitled에서 global-scope로 변경하거나 원하는 이름을 사용하십시오.

노드 인터프리터 및 패키지 관리자 섹션이 파일 시스템에서 자동으로 추가되도록 하려면 이 프로젝트를 생성하기 전에 노드 런타임 환경이 설치되어 있는지 확인하십시오.

마지막으로 만들기 버튼을 눌러 프로젝트를 생성합니다. 프로젝트가 생성되면 키보드 단축키 Alt+F12를 사용하여 새 터미널 창을 열고 다음 명령을 사용하여 tsconfig.json 파일을 만듭니다.

~/WebstormProjects/global-scope$ tsc --init

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  }
}

이 파일의 구성 대부분은 자동 생성되며, 트랜스파일 오류가 있는 경우 JavaScript 파일이 생성되지 않도록 noEmitOnError: true 속성을 추가했습니다.

글로벌 객체란?

전역 변수를 만들기 전에 전역 개체가 이 컨텍스트에서 중요한 역할을 하기 때문에 무엇인지 이해해야 합니다. JavaScript 환경에서 var 키워드를 사용하여 전역 변수를 생성하면 전역 객체에 추가됩니다.

Node.js 환경에서 변수는 실행 컨텍스트에 따라 전역 개체에 추가됩니다. 사용 가능한 다양한 실행 컨텍스트에는 브라우저, 코드가 작업자에서 실행되거나 Node.js에서 실행되는 코드가 포함됩니다.

이러한 각 컨텍스트의 개체에는 Window, Worker 및 global이 포함됩니다.

실행 컨텍스트를 고려하지 않고 전역 개체에 액세스하려면 globalThis라는 속성을 사용합니다. globalThis 속성은 전역 범위에 추가된 속성에 액세스하는 데 도움이 됩니다.

let 또는 const를 사용하여 선언된 변수는 전역 범위에 추가되지 않으며 var 키워드를 사용하여 선언된 모든 변수는 전역 범위에 추가됩니다.

TypeScript에서 전역 변수 선언

global-scope 패키지 아래 module.d.ts라는 파일을 만들고 다음 코드를 복사하여 파일에 붙여넣습니다.

declare var userName: string

declare var age: number

전역 변수에 대한 모듈을 생성하려면 이 예제에서 수행한 것처럼 .d.ts 확장자를 가진 파일 내에서 수행해야 합니다.

이 코드에서는 userName 및 age라는 두 개의 전역 변수를 생성했습니다. 변수 선언 앞에 declare 키워드를 붙였습니다.

이 파일에서 선언된 모든 변수에 대한 관례이기 때문에 최상위 수준에서 선언된 전역 변수에 declare 키워드가 접두사로 붙도록 해야 합니다.

TypeScript에서 전역 변수에 액세스

global-scope 패키지 아래에 main.ts라는 파일을 만들고 다음 코드를 복사하여 파일에 붙여넣습니다.

globalThis.userName = "john doe"
globalThis.age = 34

function main(){
    console.log(userName);
    console.log(age);
}
main();

이 코드에서는 globalThis 속성을 사용하여 전역 개체에서 전역 변수 userName 및 age에 액세스하고 각 전역 변수를 해당 유형의 값으로 초기화했습니다.

main() 함수는 각 전역 변수의 값을 콘솔에 기록합니다. 다음 명령을 사용하여 이 코드를 실행하여 코드가 예상대로 작동하는지 확인합니다.

~/WebstormProjects/global-scope$ tsc && node main.js

tsc 명령은 TypeScript 코드를 JavaScript 코드로 변환하고 node 명령은 main.js라는 파일을 실행합니다. 출력이 아래와 같은지 확인합니다.

john doe
34

결론

이 튜토리얼은 TypeScript에서 전역 변수를 생성하는 방법을 알려줍니다. 이 자습서에서 다루는 항목에는 전역 객체가 무엇인지, 전역 변수를 선언하는 방법 및 전역 변수에 액세스하는 방법이 포함됩니다.

.d.ts 파일에서 변수만 선언할 수 있는 것은 아닙니다. 인터페이스, 클래스, 함수 등을 선언할 수 있습니다.

이러한 모든 세부 정보를 변수로 묶고 싶다면 예상대로 작동하는 네임스페이스를 사용할 수 있습니다.