Frontend/TypeScript

TypeScript(TS)

개발자의 첫 걸음 2025. 11. 19. 10:00

안녕하세요. 오늘은 JavaScript를 기반으로 만든 언어, 타입스크립트(TypeScript)에 대해 알아볼게요.

 

 

타입 스크립트(TypeScript)

 

타입스크립트는 자바스크립트를 기반으로 만든 언어로, Microsoft에서 개발한 오픈소스 언어예요.

 

JS의 모든 기능을 포함하면서도 타입 검사(정적 타입) 기능을 제공하고, 개발 중 발생할 수 있는 오류를 미리 잡을 수 있어요.

 

한마디로, "JavaScript에 타입(type) 기능을 추가한 언어"라고 보시면 돼요.

 

 

타입스크립트 사용목적

 

1. 에러 사전 방지

 

JS는 동적 타입 언어라 변수의 타입이 코드가 실행될 때 결정해요.

// JavaScript 예시
let name = "Tom";
name = 123; // ❌ 실행은 되지만, 의도치 않은 에러 발생 가능

반면 TS는 컴파일(빌드)할 때 타입을 검사하므로, 코드를 실행하기 전에 오류를 찾아줘요.

// TypeScript 예시
let name: string = "Tom";
name = 123; // ⚠️ 오류 발생: number는 string에 할당 불가

👉 이렇게 미리 오류를 막아주니까 안정적인 코드를 작성할 수 있습니다.

 

 

2. 코드 자동완성 및 가이드 기능

 

변수의 타입이 명확해서 VSCode 같은 개발 도구가 자동완성, 힌트, 오류 표시를 정확히 해줘서 

 

개발속도와 정확성이 높아져요.

 

 

 

정적 타입 VS 동적 타입

 

구분 JavaScript TypeScript
타입 결정 시점 실행 시점(런타임) 컴파일 시점
유연성 높음 낮음(하지만 안전함)
오류 발견 시점 실행 중 코드 작성 중
대표 특징 동적 타입 정적 타입
let message: string = "Hello TypeScript!";
console.log(message.toUpperCase()); // 정상 작동

// message(); // ❌ 오류: 문자열은 함수처럼 호출할 수 없음

let sayHello = () => {
  console.log("Hello!");
};
sayHello(); // ✅ 함수 호출 가능

위처럼 TS는 변수 타입을 미리 지정하거나 자동으로 추론하기 때문에 의도치 않은 코드 사용을 미리 막을 수 있어요.

 

 

스코프(범위)와 모듈

 

TS는 파일 단위로 스코프가 자동 생성되지 않아요. 

 

즉, 여러 파일에서 같은 이름의 변수를 쓰면 충돌할 수도 있어요.

 

이를 막으려면 export 키워드를 사용해 모듈로 만들면 돼요.

export const tmp = ""; // 모듈 선언
let num = 10;
console.log(num);

이렇게 하면 다른 파일의 전역 변수와 충돌하지 않아요.

 

 

 

TypeScript의 장단점 

 

 

 

 

여기까지 TypeScript에 대해 알아봤는데요.

 

이 코드를 잘 활용한다면 개발효율을 높여줄 것 같아요.

'Frontend > TypeScript' 카테고리의 다른 글

Synchronous & Asynchronous & async / await  (0) 2025.11.25
TypeScript Generic(Advanced)  (0) 2025.11.23
TypeScript Generic  (0) 2025.11.21
TypeScript Interface  (0) 2025.11.21
TypeScript Type  (0) 2025.11.20