취미/개발

TypeScript 기본 타입

반응형

TypeScript는 JavaScript에 정적 타입을 추가하여 더 안전하고 유지 보수하기 쉬운 코드를 작성할 수 있게 해줍니다. 이 글에서는 TypeScript의 기본 타입, type annotations, 타입 추론(type inference), 그리고 any 타입과 이를 사용할 때 주의해야 할 점에 대해 설명합니다.

TypeScript 기본 타입

TypeScript는 다양한 기본 타입을 제공합니다. 각 타입의 특징과 예제를 살펴보겠습니다.

문자열(string)

string 타입은 문자열 데이터를 나타냅니다.

let username: string = '홍길동';
console.log(`안녕하세요, ${username}님!`); // 안녕하세요, 홍길동님!

숫자(number)

number 타입은 정수 및 부동 소수점 숫자를 포함합니다.

let userAge: number = 25;
let temperature: number = 36.6;

console.log(`사용자의 나이는 ${userAge}세입니다.`);
console.log(`현재 체온은 ${temperature}°C입니다.`);

불리언(boolean)

boolean 타입은 참(true) 또는 거짓(false) 값을 나타냅니다.

let isLoggedIn: boolean = true;
console.log(isLoggedIn ? '로그인 상태입니다.' : '로그아웃 상태입니다.');

null과 undefined

nullundefined는 각각 "값이 없음"과 "정의되지 않음"을 나타냅니다.

let userName: string | null = null; // null을 허용
let userEmail: string | undefined = undefined; // undefined를 허용

console.log(userName); // null
console.log(userEmail); // undefined

배열(Array)

배열은 동일한 타입의 데이터를 저장하는 데 사용됩니다.

let favoriteFoods: string[] = ['김치', '불고기', '비빔밥'];
console.log(`제가 좋아하는 음식: ${favoriteFoods.join(', ')}`);

또는 Array<T> 문법을 사용할 수도 있습니다.

let scores: Array<number> = [100, 90, 80];
console.log(`시험 점수: ${scores.join(', ')}`);

Type Annotations

Type Annotations은 변수, 매개변수, 반환 값 등에 명시적으로 타입을 지정할 수 있게 합니다.

변수에 Type Annotations 추가하기

let userId: number = 12345;
let isAdmin: boolean = false;

console.log(`사용자 ID: ${userId}, 관리자 여부: ${isAdmin}`);

함수에 Type Annotations 추가하기

함수의 매개변수와 반환 값에 타입을 명시할 수 있습니다.

function greet(userName: string): string {
  return `안녕하세요, ${userName}님!`;
}

console.log(greet('홍길동'));

객체의 타입

객체의 각 프로퍼티에 타입을 정의할 수 있습니다.

let user: { id: number; name: string; isActive: boolean } = {
  id: 1,
  name: '김철수',
  isActive: true,
};

console.log(user);

타입 추론(Type Inference)

TypeScript는 초기값을 기반으로 변수의 타입을 자동으로 추론합니다.

let greeting = '안녕하세요'; // TypeScript는 greeting 변수를 string으로 추론
console.log(greeting);

// greeting = 123; // 오류: string 타입에 number 타입을 할당할 수 없습니다.

타입 추론을 활용하면 코드가 간결해지지만, 복잡한 상황에서는 명시적으로 타입을 지정하는 것이 좋습니다.


any 타입과 사용 시 주의점

any 타입은 모든 타입의 값을 허용하며, TypeScript의 타입 검사를 우회합니다. 하지만 지나치게 사용하면 코드 안정성을 해칩니다.

any 타입의 예

let data: any = '문자열 데이터';
data = 123; // 숫자도 할당 가능
data = true; // 불리언도 할당 가능
console.log(data);

any 사용 시 주의할 점

any를 남용하면 TypeScript의 장점을 잃게 됩니다. 최대한 구체적인 타입을 사용하여 타입 안정성을 유지하는 것이 중요합니다. 필요할 경우 unknown 타입을 고려할 수도 있습니다.

function processInput(input: unknown): void {
  if (typeof input === 'string') {
    console.log(`문자열 처리: ${input}`);
  } else if (typeof input === 'number') {
    console.log(`숫자 처리: ${input}`);
  } else {
    console.log('알 수 없는 타입');
  }
}

processInput('안녕하세요');
processInput(12345);

반응형