TypeScript 타입 종류 한 번에 정리

TypeScript는 JavaScript와 비슷한 프로그래밍 언어로, 데이터 유형을 명시적으로 기재하여 코드를 좀 더 안전하고 수월하게 유지보수 할 수 있도록 도와주는 언어입니다. 그렇다면 타입스크립트가 다루는 타입에는 어떤 것들이 있을까요?

 

이번 글에서는 원자값 타입, 인터섹션 타입, 인터페이스와 타입 앨리어스, 제네릭 타입에 대해 간단히 알아보겠습니다.

 

 

1. 원자값 타입 (Primitive Types)

원자값 타입은 가장 기본적인 데이터의 종류라고 생각하면 됩니다.

이런 타입들은 더 이상 쪼개질 수 없는 단순한 데이터를 의미합니다.

 

string: 글자들로 이루어진 문자열입니다.

let name: string = 'Alice';

 

number: 숫자 값을 나타냅니다.

let age: number = 14;

 

boolean: 참(true) 또는 거짓(false) 값을 가질 수 있습니다.

let isStudent: boolean = true;

 

null: 아무것도 없음을 나타내는 값입니다.

let emptyValue: null = null;

 

undefined: 값이 아직 정해지지 않았음을 나타냅니다.

let notAssigned: undefined = undefined;

 

symbol: 고유한 식별자를 만들 때 사용합니다.

let uniqueId: symbol = Symbol('id');

 

bigint: 아주 큰 숫자를 다룰 때 사용합니다.

let bigNumber: bigint = 12345678901234567890n;

 

any: 어떤 값이든 할당할 수 있고, 어떤 값으로도 할당될 수 있습니다.

let anything: any = 'Hello';

 

unknown: 어떤 값인지 모를 때 사용합니다. 값을 사용할 때는 타입을 검사해야합니다.

let unknownValue: unknown = 42;

 

void: 함수에서 반환 값이 없을 때 사용합니다.

function sayHello(): void {
  console.log('Hello!');
}

 

never: 어떤 값도 가질 수 없을 때 사용합니다.

let impossible: never;
impossible = 3; // 오류 발생!

 

 

 

2. 인터섹션 타입 (Intersection Type)

인터섹션 타입은 여러 타입을 합쳐서 새로운 타입을 만들어 냅니다. 마치 두 가지 성질을 가진 물건을 만든다고 생각하면 됩니다.

예를 들어, 사람(Person)과 연락처(Contact)의 정보를 합쳐서 직원(Employee)이라는 타입을 만들 수 있습니다.

type Person = {
  name: string;
};

type Contact = {
  email: string;
};

type Employee = Person & Contact;

const employee: Employee = {
  name: 'Alice',
  email: 'alice@example.com',
};

 

이렇게 하면 Employee 타입은 name과 email이라는 속성을 모두 가질 수 있게 됩니다.

 

 

3. 인터페이스 (Interface)

인터페이스는 객체의 구조를 정의하는 데 사용됩니다.

인터페이스의 가장 큰 장점은 확장 가능성입니다.

다른 인터페이스를 상속받아서 속성을 추가할 수 있습니다.

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

const myDog: Dog = {
  name: 'Buddy',
  breed: 'Golden Retriever',
};

 

Animal 인터페이스는 name이라는 문자열 속성을 가지고 있습니다.

Dog 인터페이스는 Animal을 확장(상속)해서 breed라는 추가적인 속성을 가지게 됩니다.

그 결과 myDog 객체는 Dog 인터페이스에 정의된 모든 속성(name과 breed)을 가지게 됩니다.

 

이렇게 인터페이스를 확장하면서 코드의 재사용성을 높이고, 보다 유연한 구조를 만들 수 있습니다.

 

 

4. 타입 앨리어스 (Type Alias)

타입 앨리어스는 이름에서 알 수 있듯이, 특정 타입에 별명을 붙이는 것과 같습니다.

타입 앨리어스는 단순한 타입부터 복잡한 타입까지 정의할 수 있는데

특히, 유니언 타입이나 튜플과 같은 복잡한 타입을 정의하는 데 매우 유용합니다.

type StringOrNumber = string | number;

let value: StringOrNumber = 'Hello';
value = 42; // 둘 다 가능!

 

StringOrNumber 타입 앨리어스는 string이나 number 중 하나의 타입을 가질 수 있다는 의미입니다.

value 변수는 string과 number 타입을 모두 가질 수 있습니다.

 

타입 앨리어스는 다양한 타입을 조합하거나 유니언 타입을 정의할 때 유용하게 사용할 수 있습니다.

 

 

5. 제네릭 타입 (Generic Types)

제네릭 타입은 다양한 타입을 다룰 수 있는 함수나 클래스를 만들 때 사용합니다.

미리 타입을 정하지 않고, 나중에 필요할 때 타입을 정할 수 있도록 해줍니다.

 

예를 들어, 여러 종류의 데이터를 저장할 수 있는 DataStorage라는 클래스를 만들어 보겠습니다.

class DataStorage<T> {
  private data: T[] = [];

  addItem(item: T) {
    this.data.push(item);
  }

  getItems(): T[] {
    return [...this.data];
  }
}

const textStorage = new DataStorage<string>();
textStorage.addItem('Hello');
textStorage.addItem('World');
console.log(textStorage.getItems()); // ['Hello', 'World']

 

여기서 <T>는 어떤 타입이든 받아들이겠다는 의미입니다.

 

예시에서는 `<string>`을 지정했지만, 이와 비슷하게 `<number>`로 정의하면 숫자 데이터를, `<boolean>`로 정의하면 불리언 데이터를 저장하고 관리할 수 있습니다.

 

이렇게 제네릭 타입을 사용하면 다양한 데이터 타입에 대해 같은 클래스를 유연하게 활용할 수 있습니다.

 

 

마무리

이렇게 TypeScript의 기본 타입들을 정리해보았습니다.

헷갈릴 때마다 간단한 예시를 다시 돌아보면서 적용해보시기 바랍니다 :)