학습
TypeScript 기본 문법
TypeScript 기본 문법 — 초급
TypeScript 기본 문법
1. 도입 (왜 배워야 하는가)
TypeScript는 JavaScript의 상위 집합으로, 정적 타입을 지원합니다. 이는 즉, 코드 작성 시 오류를 사전에 발견할 수 있어, 대규모 애플리케이션 개발에 매우 유용합니다. 실무에서 TypeScript를 사용하면 코드의 가독성과 유지보수성이 향상되며, 팀원 간의 협업도 더 원활해집니다.
TypeScript를 배우지 않으면, 코드에서 발생할 수 있는 오류를 런타임에만 발견하게 되어, 디버깅 시간이 길어지고, 예기치 않은 버그가 발생할 수 있습니다. 특히 대형 프로젝트에서는 이러한 문제로 인해 생산성이 저하될 수 있습니다.
2. 핵심 개념 설명
2.1 변수 선언
TypeScript에서는 변수를 let, const, var로 선언할 수 있습니다. 각각의 차이는 다음과 같습니다.
| 키워드 | 설명 | 사용 예시 |
|---|---|---|
| let | 재할당 가능한 변수 선언 | let name = "John"; |
| const | 재할당 불가능한 상수 선언 | const pi = 3.14; |
| var | 함수 스코프 변수를 선언 (비추천) | var age = 30; |
2.2 타입
TypeScript는 변수를 선언할 때 타입을 명시할 수 있습니다. 예를 들어, 숫자, 문자열, 배열 등이 있습니다.
- 문자열:
string - 숫자:
number - 불리언:
boolean - 배열:
Array<number>또는number[]
3. 기본 코드 예제
아래는 TypeScript의 기본 변수를 선언하고 사용하는 코드입니다.
let name: string = "Alice"; // 이름을 문자열 타입으로 선언
const age: number = 25; // 나이를 숫자 타입으로 선언
let isStudent: boolean = true; // 학생 여부를 불리언 타입으로 선언
console.log(name); // "Alice"
console.log(age); // 25
console.log(isStudent); // true실행 결과
Alice
25
true코드 한 줄씩 동작 설명
let name: string = "Alice";: name이라는 변수를 문자열 타입으로 선언하고 "Alice"라는 값을 할당합니다.const age: number = 25;: age라는 변수를 숫자 타입으로 선언하고 25라는 값을 할당합니다. 이 변수는 재할당이 불가능합니다.let isStudent: boolean = true;: isStudent라는 변수를 불리언 타입으로 선언하고 true라는 값을 할당합니다.console.log(name);: name의 값을 출력합니다.console.log(age);: age의 값을 출력합니다.console.log(isStudent);: isStudent의 값을 출력합니다.4. 실전 활용 예제
예제 1: 쇼핑몰에서 장바구니 구현
쇼핑몰에서 장바구니에 상품을 추가할 때 TypeScript를 사용하면 타입 안정성을 유지할 수 있습니다.
type Product = {
id: number;
name: string;
price: number;
};
let cart: Product[] = []; // 장바구니는 Product 타입의 배열
function addToCart(product: Product) {
cart.push(product); // 장바구니에 상품 추가
}
const newProduct: Product = { id: 1, name: "Laptop", price: 1500 };
addToCart(newProduct);
console.log(cart);예제 2: 사용자 정보 처리
사용자 정보를 처리할 때에도 TypeScript를 활용하여 안정성을 높일 수 있습니다.
type User = {
username: string;
email: string;
};
function createUser(user: User) {
console.log(사용자 ${user.username}가 생성되었습니다.);
}
const user: User = { username: "john_doe", email: "[email protected]" };
createUser(user);5. 흔한 실수와 주의사항
실수 1: 타입 불일치
let age: number = "25"; // 오류 발생올바른 코드:
let age: number = 25; // 숫자로 할당실수 2: 변수를 재선언
const name = "Alice";
name = "Bob"; // 오류 발생올바른 코드:
let name = "Alice"; // let을 사용해야 재할당 가능
name = "Bob"; // 재할당 가능6. 정리
let, const, var의 차이를 이해해야 합니다.