effective Javascript를 읽다가 declare를 제대로 알지 못하여 이에 대해 검색해보았다.
그러다가 알게된 것들이 많아 이렇게 정리하게 되었다.
(그 궁금증으로 인해 엄청난 시간이 소요되었다. ㄷㄷㄷ)
우리가 일반적인 자바스크립트 환경에서는 두 개의 JS파일을 같이 사용하고자 한다면 아래처럼 해도 된다.
// data.js
const a = 10;// index.js
console.log(a + 5);// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>"hi"</h1>
<script src="data.js"></script>
<script src="index.js"></script>
</body>
</html>이런식으로 해도 정상적으로 작동한다.
하지만 js와 ts를 같이사용한다면 ?
// data.js
const a = 10;// index.ts
console.log(a + 5);// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>"hi"</h1>
<script src="data.js"></script>
<script src="index.js"></script> // ts를 컴파일한 js파일 ( tsc index.ts )
</body>
</html>정상적으로 작동은 하지만 편집기에 아래와 같은 에러가 뜬다.
타입스크립트는 a가 정의되어있지않아 찾을 수 없다고 에러가 뜬다.
이때 이러한 오류를 해결할 수 있는 방법중 하나가 'declare 키워드로 재정의하기' 이다.
declare
declare를 쓰면 이미 정의된 변수나 함수를 재정의 할 수 있다. ( 타입까지도 재정의가 가능하다)
// data.js
const a = 10;// index.ts
declare let a : number;
console.log(a + 5);(주의 : 그냥 js와 ts파일만 만들고 VSCode의 runcode 같은 것으로 console.log 테스트하면 에러가 뜬다.
console.log로 출력하게 할려면 다른 방법으로 해야한다. 이거 삽질로만 몇시간이 날라갔다. )
declare는 무엇인가?
- TypeScript로 작성하지 않은 코드의 타입 정보를 컴파일러에게 알려주는 선언이다.
- declare가 붙은 코드들은 JS로 컴파일 되지 않는다. (즉, 단순히 컴파일러에게 타입 정보를 제공하기 위한 도구이다.)
(tsconfig.json 안에 allowJs 옵션을 true로 설정하면 자바스크립트 파일도 타입 지정이 알아서 된다.
Ambient Module
타입스크립트에는 어메이징?한 기능이 하나 있다.
바로 import export 없이도 타입스크립트파일이면 서로 가져다 쓸 수 있다.
예를 들면 data.ts에 있는 변수나 타입 정의를 index.ts에서 따로 설정없이 가져다 쓸 수 있다.
// data.ts
type Age = number;
let 나이 :Age = 20;
// index.ts
console.log(나이 + 1);
let 철수 :Age = 30;타입스크립트 파일에 입력한 변수와 타입들은 전역 변수 취급을 받기에 가능하다.
전역으로 쓸 수 있는 파일을 ambient module이라고 한다.
반면에 import 혹은 export 키워드가 하나라도 들어간 타입스크립트 파일은 로컬 모듈이 되고,
거기에 있는 모든 변수는 export를 해야지 다른 파일에서 사용이 가능하다.
이렇게 전역으로 말고 지역으로 취급 받고 싶다면 export or import 키워드를 추가하면 된다.
이 키워드가 있으면 타입스크립트는 해당 파일은 지역 스코프로 한정한다.
// data.ts
export {};
type Age = number;
let 나이 :Age = 20;
// index.ts
console.log(나이 + 1); // 에러 발생
let 철수 :Age = 30; // 에러 발생
https://spookyjelly.tistory.com/83
https://bum-developer.tistory.com/entry/TypeScript-Declare-Ambient-Module
https://snap-haircut.com/sports/post-00028.html
'Typescript > 개념' 카테고리의 다른 글
| [Typescript] void (0) | 2023.02.14 |
|---|---|
| [Typescript] 3. Polymorphism / generics (0) | 2023.01.19 |
| [Typescript] 4. Class and Interfaces (1) | 2022.09.27 |
| [Typescript] call signatures // overloading (0) | 2022.09.22 |
| [Typescript] Type part 3 ( unknown / void / never ) (1) | 2022.09.21 |
