TypeScript에서 변수 충돌을 방지하는 두가지 방법

프로젝트르 TypeScript로 작성할 때에는 한 파일에서 선언한 변수가 다른 파일에서 똑같이 선언될때 충돌이 일어난다.

 

문제 상황: 전역 스코프 충돌

// helloWorld.ts
let num: number = 10;

// basic.ts
let num: number = 10;

위처럼 num이라는 변수를 두 파일에 각각 선언하면 TypeScript는 

블록 범위 변수 'num'을(를) 다시 선언할 수 없습니다.ts(2451)

이와 같은 에러메시지를 발생시킨다.

 

TypeScript는 파일 단위로 스코프를 구분하지 않기 때문에  module로 인식되지 않는다면 프로젝트 내의 모든 파일이 같은 전역 스코프를 사용하게 된다.

 

변수 충돌을 막는 두 가지 방법

✅ 중괄호 블록으로 지역 스코프 생성

{
  let num = 10;
}

{
  let num = 10;
}

블록({}) 내부에서 선언한 변수는 해당 블록 내부에서만 유효함. 

•  장점: 쉽고 빠르게 스코프를 나눌 수 있음

export 키워드로 모듈 스코프 생성

// basic.ts
export const tmp = ""; // 모듈로 인식되도록 함

let num = 10;
console.log(num); // 10

• export 키워드를 하나라도 포함하면 해당 파일은 자동으로 모듈로 간주됨
• 모듈로 지정된 파일은 고유한 스코프를 갖게 되며, 다른 파일과 전역 변수 이름이 충돌하더라도 문제없이 동작
• 장점: 모듈 스코프가 생성되어 안전하게 코드 분리 가능
• 실제 프로젝트에서는 이 방식이 가장 많이 사용됨
• ⚠️ 주의: 파일 단위로 모듈이 되므로, import/export 관리가 필요함