FRONTMANFRONTMAN
  • 태그
  • 방명록
  • 글쓰기
  • 관리자
  • HOME
  • 태그
  • 방명록
TypeScript 기본 타입
hahekaku
TypeScript 기본 타입Language/TypeScript2023. 10. 16. 00:40@hahekaku
Table of Contents

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

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

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);

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

TypeScript interface와 type aliasing  (0) 2023.10.16
TypeScript 함수 타입 정의  (0) 2023.10.16
TypeScript 객체(Object)와 배열(Array)에서의 타입  (0) 2023.10.16
TypeScript 설치 방법 및 기본 설정  (0) 2023.10.16
TypeScript란?  (0) 2023.10.15
Language/TypeScript 추천 글
more
  • TypeScript 함수 타입 정의
    TypeScript 함수 타입 정의2023.10.16
  • TypeScript 객체(Object)와 배열(Array)에서의 타입
    TypeScript 객체(Object)와 배열(Array)에서의 타입2023.10.16
  • TypeScript 설치 방법 및 기본 설정
    TypeScript 설치 방법 및 기본 설정2023.10.16
  • TypeScript란?
    TypeScript란?2023.10.15
FRONTMAN

검색

250x250

방문자 수

Total
Today
Yesterday

카테고리

  • 분류 전체보기 (54)
    • Language (48)
      • JavaScript (15)
      • TypeScript (14)
      • Python (14)
      • Dart (5)
      • Java (0)
    • FE (6)
      • WEB (4)
      • React (0)
      • Flutter (1)
    • CS (0)
      • Algorithm (0)
      • Network (0)
    • DevOps (0)

공지사항

  • 전체보기

최근 글

인기 글

태그

  • Type
  • await
  • Python
  • OOP
  • 리스트
  • inline frame
  • Flutter
  • npm
  • async
  • DART
  • 파이썬
  • CLASS
  • 자바스크립트
  • Import
  • typeScript
  • function
  • export
  • nodejs
  • frontend
  • 타입스크립트
  • tuple
  • Interface
  • 타입
  • JavaScript
  • web
  • list
  • 웹
  • Object
  • js
  • Modules

최근 댓글

FRONTMAN :: hahekaku
CopyrightBluemivDesigned byBluemiv

티스토리툴바