자바스크립트, 타입스크립트 Declare
이런 것에 대한 정보를 담고 있다
- 타입스크립트, 자바스크립트라는 언어로 만든 프로젝트의 경계
- Declare의 의미
이런 것에 대한 정보는 담겨있지 않다
- Declare에 대한 실제 자세한 코드 예시
주로 프로젝트나, 개인 작업을 할때 많이 쓰는 언어가 C++, 자바, 파이썬이었는데 js, ts에 대해서도 많이 장벽이 사라졌다. 그런데 js, ts는 사용하다보면 다른 언어랑 다른점이 좀 있다
js는 프로젝트 경계가 애매하다.
자스, 타스는 일단 환경이 여러개다. 대표적으로 브라우저 엔진이 있고, Node js같은 서버같은 환경도 존재한다. 그래서 브라우저 엔진의 window나 Node js의 globalThis처럼 내가 정의하지 않았거나 import 하지도 않은 객체들을 사용할 수 있다.
C++이랑 파이썬이랑 비교해보면 C++은 컴파일러를 통해서 프로젝트 경계를 정하고 파이썬은 import를 통해서 프로젝트의 범위를 정할 수 있는 것이랑 약간 다르다.
또 next, react같은 프로젝트도 실행파일이나, 어떤 한 시작점에 해당하는 파일을 실행하는 것이 아니라 npm을 활용해서 프로젝트를 시작한다.
js, ts의 프로젝트의 경계
간단하게 정리하면 3가지로 지정할 수 있는데 자바스크립트의 경우엔
브라우저의 경우는 시작점이 <script> 라고 보면된다, 여러개의 <script>는 같은 환경으로 묶여서 전역객체를 공유할수도 있게된다.
Nodejs의 경우엔 main.js를 시작점으로 삼아서 사용한다
타입스크립트의 경우엔 좀 특이하게 tsconfig.json 을 기준으로 타입스크립트를 자바스크립트로 컴파일하는 과정을 거쳐야한다.
Next나 React로 타입스크립트를 빌드해도. 이 과정이 일어나고 이후에 브라우저에 컴파일된 자바스크립트 자원을 넣는것으로 사용한다.
declare의 존재
그런 측면에서 typescript의 declare도 특이한 점 중의 하나다.
declare global { interface Window { myVar: string; } }
declare은 이런식으로 자스, 타스의 선언하지 않은 외부 객체들에 대해서 접근할 수 있게 해주는 역할을 한다.
declare은 C++ static이랑 같은건가?
그래서 난 처음엔 C++ 스태틱 선언처럼 타입스크립트도 전역데이터를 설정하기 위해서 존재하는것이라고 생각했지만 그렇지는 않았다.
일단 declare로 선언해도 타입스크립트에서 import/export가 있는 모듈형 파일에서는 이 값을 사용할 수 없다고한다. 그리고 declare 은 타입만 지정하지 실제 데이터를 어딘가에 저장하는 일은 하지 않는다.
declare은 외부 환경에 대응하기 위해 만들어졌다.
declare의 명확한 목적은. 타입스크립트가 형태를 항상 지정해줘야하는 특징 때문에 형태가 정해지지 않은 외부코드 환경에 대해서 확장을 하기위해서 만들어졌다.
cef를 사용하다보면 엔진을 켠 어플리케이션과 브라우저가 소통해야할 일이 있는데 이때 window cef함수들에 대해서 declare을 사용해 함수를 정의해 주어야 우리가 사용할 수 있는것이 대표적인 예시다
declare function cefQuery(options: any): void;
declare global {
interface Window {
cefQuery: (options: any) => void;
}
}