Web & App/Frontend Study

타입스크립트 기본 타입

jimmmy_jin 2025. 1. 19. 17:09

타입스크립트의 기본 타입 알아보기

타입스크립트는 정적 타입 시스템을 기반으로 하는 언어로, 다양한 타입을 제공한다. 이를 통해 코드의 안정성과 가독성을 높일 수 있다. 이번 포스팅에서는 타입스크립트에서 가장 기본적으로 사용되는 타입들을 살펴보자.


1. 기본적인 타입

A. 숫자(Number)

number 타입은 정수와 소수를 모두 포함한다.

let age: number = 25;
let price: number = 99.99;

B. 문자열(String)

string 타입은 텍스트 데이터를 다룰 때 사용된다. 작은따옴표, 큰따옴표, 템플릿 리터럴을 지원한다.

let name: string = "John";
let message: string = `Hello, ${name}!`;

C. 불리언(Boolean)

boolean 타입은 참(true)과 거짓(false) 값을 가진다.

let isActive: boolean = true;
let hasPermission: boolean = false;

D. 배열(Array)

배열의 타입을 정의할 때는 요소 타입 뒤에 대괄호([])를 추가하거나, Array<요소 타입> 형태로 선언한다.

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["Apple", "Banana", "Cherry"];

E. 튜플(Tuple)

튜플은 고정된 길이와 각 요소의 타입을 명확히 정의할 수 있는 배열이다.

let user: [number, string] = [1, "John"];

F. 열거형(Enum)

enum은 숫자 또는 문자열 값의 집합에 이름을 부여할 수 있다.

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

let move: Direction = Direction.Up;

2. 특수 타입

A. any

any 타입은 모든 값을 허용하며, 타입 체크를 무력화한다. 타입스크립트의 장점을 잃게 되므로 꼭 필요한 경우에만 사용해야 한다.

let dynamicValue: any = 42;
dynamicValue = "A string"; // 가능
dynamicValue = true;       // 가능

B. unknown

unknown은 any와 유사하지만, 보다 안전한 타입이다. unknown 타입의 값을 사용하려면 먼저 타입을 확인해야 한다.

let value: unknown = "Hello";

if (typeof value === "string") {
  console.log(value.toUpperCase());
}

C. void

void는 함수에서 반환값이 없음(return 이 없음) 을 나타낼 때 사용된다.

function logMessage(message: string): void {
  console.log(message);
}

D. never

never는 절대 값을 반환하지 않는 함수의 반환 타입으로 사용된다. 예를 들어, 무한 루프나 예외를 던지는 함수가 해당된다.

function throwError(message: string): never {
  throw new Error(message);
}

3. 유니언 타입과 인터섹션 타입

A. 유니언 타입 (Union)

유니언 타입은 하나 이상의 타입을 허용할 수 있다. 파이프(|)를 사용하여 정의한다.

let id: number | string;
id = 123;       // 가능
id = "ABC123";  // 가능

B. 인터섹션 타입 (Intersection)

인터섹션 타입은 여러 타입을 결합하여 모두 만족하는 타입을 생성한다. 앰퍼샌드(&)를 사용한다.

interface Person {
  name: string;
}

interface Employee {
  employeeId: number;
}

let worker: Person & Employee = {
  name: "Alice",
  employeeId: 101,
};

4. 타입 단언과 타입 가드

A. 타입 단언 (Type Assertion)

개발자가 특정 변수의 타입을 명확히 알 때 타입스크립트에 해당 타입을 알려줄 수 있다.

let value: any = "This is a string";
let length: number = (value as string).length;

B. 타입 가드 (Type Guard)

타입 체크를 수행하여 변수의 타입을 좁히는 기능이다.

function isString(value: unknown): value is string {
  return typeof value === "string";
}

let input: unknown = "Hello";

if (isString(input)) {
  console.log(input.toUpperCase());
}

5. 널 가능 타입과 선택적 속성

A. 널 가능 타입 (Nullable Types)

타입 뒤에 | null 또는 | undefined를 추가하여 해당 값이 null 또는 undefined일 수 있음을 명시한다.

let nullableValue: string | null = null;
nullableValue = "Hello";

B. 선택적 속성 (Optional Properties)

객체의 속성 중 일부를 선택적으로 정의할 수 있다.

interface User {
  id: number;
  name?: string; // 선택적 속성
}

let user: User = { id: 1 };

 

'Web & App > Frontend Study' 카테고리의 다른 글

Next.Js 파헤치기  (1) 2025.01.19
Typescript 정리 및 마무리  (0) 2025.01.19
Typescript를 알아보자  (1) 2025.01.16
Query key에 대한 추가 설명  (0) 2025.01.15
React Query: 완벽한 마무리 정리  (0) 2025.01.15