[Type Script] 타입스크립트의 타입 정리

2025. 6. 28. 23:20

타입스크립트의 타입

타입스크립트는 자바스크립트의 '타입' 개념을 도입하여 코드의 안정성을 높입니다. 아래 내용은 자바스크립트의 기본적인 값의 타입을 포함하여 타입스크립트에서 사용할 수 있는 타입들을 정리한 글 입니다.

기본 타입 (Primitive Types)

자바스크립트에도 있는 가장 기본적인 값의 타입들입니다.

boolean: 논리적인 참/거짓을 나타냅니다.
number: 숫자 값을 나타냅니다. 정수, 실수 구분 없이 모두 number 타입입니다.
string: 텍스트 데이터를 나타냅니다. 큰따옴표 (""), 작은따옴표 (''), 백틱 (`)으로 감싸서 사용합니다.
null: '값이 없음'을 나타내는 특별한 값입니다. 의도적으로 값이 없음을 표현할 때 사용합니다.
undefined: '값이 할당되지 않음'을 나타내는 값이에요. 변수를 선언만 하고 값을 할당하지 않으면 기본적으로 undefined가 됩니다.
symbol: ES6에 추가된 유니크하고 변경 불가능한(immutable) 값입니다. 주로 객체 속성의 키(key)로 사용될 때 충돌을 방지하기 위해 쓰입니다.
bigint: 아주 큰 정수를 다룰 때 사용합니다. number 타입은 표현할 수 있는 정수 값의 범위에 한계가 있습니다.

배열 타입 (Array Types)

여러 값을 순서대로 저장하는 배열의 타입입니다. 두 가지 방법으로 선언할 수 있습니다.

요소 타입 뒤에 [] 붙이기: 가장 일반적인 방법입니다.

let list: number[] = [1, 2, 3];
let names: string[] = ["철수", "영희"];

제네릭 배열 타입 Array<엘리먼트타입>: 선언할 때, 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다.

function print<T>(value: T): void {
  console.log(`당신이 전달한 값은 ${value} 입니다.`);
}

위 함수는 제네릭 기본 문법이 적용된 형태입니다. 함수를 호출할 때, 아래와 같이 함수 안에서 사용할 타입을 넘겨주는 방법 또한 가능해집니다.

print<string>("Hello, World!");
print<number>(42);
print<boolean>(true);

튜플 타입 (Tuple Types)

요소의 타입과 개수가 고정된 배열을 정의할 때 사용합니다. 각 위치마다 다른 타입을 가질 수 있습니다.

let x: [string, number]; // 첫 번째는 문자열, 두 번째는 숫자만 와야 함
x = ["hello", 10]; // 올바른 지정
// x = [10, "hello"]; // 에러, 순서와 타입이 맞지 않음
// x = ["hello", 10, true]; // 에러, 개수가 맞지 않음

열거형 (Enum)

숫자 값 집합에 이름을 부여할 수 있도록 하는 타입입니다. 코드의 가독성을 높이고, 특정 값들의 집합을 명확하게 표현할 때 유용합니다.

enum Color {
  Red,    // 0
  Green,  // 1
  Blue    // 2
}

let c: Color = Color.Green;
console.log(c); // 1

enum HttpStatus {
  OK = 200,
  NotFound = 404,
  InternalServerError = 500
}
let status: HttpStatus = HttpStatus.OK;
console.log(status); // 200

any 타입

모든 타입의 값을 허용합니다. 타입 검사를 일시적으로 비활성화할 때 사용하며 타입스크립트의 장점(타입 안정성)을 잃게 되므로 사용을 지양합니다. 자바스크립트에서 타입스크립트로 코드를 점진적으로 마이그레이션할 때나, 외부 라이브러리 타입을 알 수 없을 때 임시로 사용합니다.

let notSure: any = 4;
notSure = "문자열도 가능";
notSure = false; // 불리언도 가능

void 타입

함수가 어떤 값도 반환하지 않을 때 사용합니다. 변수에는 거의 사용되지 않습니다 (할당할 수 있는 값이 undefined나 null밖에 없습니다).

function warnUser(): void {
  console.log("no message");
  // 이 함수는 아무것도 반환하지 않습니다.
}

object 타입

원시 타입(number, string, boolean, symbol, null, undefined, bigint)이 아닌 모든 타입의 객체를 나타냅니다. 일반적인 객체, 배열, 함수 등을 포함합니다.

let obj: object = { name: 'Kim' };
obj = [1, 2, 3];
obj = function() {};

obj = 10; // 에러: 원시 타입은 할당 불가

유니언 타입 (Union Types)

여러 타입 중 하나가 될 수 있음을 나타낼 때 사용합니다. | (파이프) 기호로 타입을 연결합니다.

let multiType: number | string; // number 또는 string 타입 가능
multiType = 10;
multiType = "열";

multiType = true; // 주어진 타입에 Boolean 형은 없으므로, 에러입니다.

타입 별칭 (Type Aliases)

기존 타입에 새로운 이름을 부여하여 코드의 가독성을 높이고 복잡한 타입을 재사용할 때 사용합니다. type 키워드를 사용합니다.

type ID = string | number; // string 또는 number 타입을 ID라는 이름으로 정의

let userId: ID = "user123";
userId = 456;

type Point = {
  x: number;
  y: number;
};

let coord: Point = { x: 10, y: 20 };

기존 타입에 새로운 이름을 부여하여 복잡한 타입을 간결하게 표현하거나, 유니언 타입, 인터섹션 타입 등 복합적인 타입들을 정의할 때 주로 사용됩니다. 객체의 구조를 정의할 때도 사용 가능합니다.

유니언 타입 (A | B)이나 인터섹션 타입 (A & B) 등 여러 타입을 합쳐서 새로운 타입을 정의할 때.
원시 타입에 별칭을 부여할 때 (type ID = string;).
튜플 타입을 명시적으로 정의할 때.
함수 타입을 정의할 때 (type Callback = (arg: string) => void;)

인터페이스 (Interface)

주로 객체의 구조를 정의하거나, 클래스가 특정 조건을 만족하도록 강제할 때 사용합니다. 타입 별칭과 유사하지만, 주로 객체 지향적인 관점에서 사용됩니다.

interface User {
  id: number;
  name: string;
  email?: string; // ?는 선택적 속성 (있어도 되고 없어도 됨)
  readonly age: number; // 읽기 전용 속성 (초기 할당 후 변경 불가)
}

let newUser: User = {
  id: 1,
  name: "김강현",
  age: 30
};

// newUser.age = 26; // 'age'는 읽기 전용 속성이므로 에러입니다.

interface Employee extends User { // User 인터페이스를 확장 (상속)
  department: string;
}

let newEmployee: Employee = {
  id: 2,
  name: "최수정",
  age: 20,
  department: "개발"
};

주로 객체의 구조를 정의하고, 객체 지향 프로그래밍의 계약(contract) 역할을 하는 데 사용됩니다. 특정 클래스가 이 구조를 따르도록 강제하거나, 객체가 이 모양을 가졌음을 명시할 때 유용합니다.

제네릭

제네릭은 선언할 때(함수나 클래스를 정의할 때) 타입을 함수의 파라미터처럼 사용하는 것을 의미합니다. 코드를 작성할 때는 특정 타입을 확정하지 않고, 실제로 사용할 때(함수나 클래스를 호출/생성할 때) 타입을 지정할 수 있게 해주는 기능입니다.

제네릭을 사용하면 한 번 작성한 코드를 여러 타입에서 재사용할 수 있으며, 코드 중복을 줄이고 유연성을 높입니다.

기본 문법: <T>와 같이 꺾쇠 괄호 안에 타입 파라미터를 넣어 사용합니다.

function identity<T>(arg: T): T {
  return arg;
}

// 사용할 때 타입을 지정합니다.
let output1 = identity<string>("myString"); // T는 string이 됩니다.
let output2 = identity<number>(100);    // T는 number가 됩니다.

// 타입 추론도 가능합니다.
let output3 = identity("anotherString"); // T는 string으로 추론됩니다.

인터페이스(Interface)와 타입 별칭(Type Aliases)

'객체'의 구조를 정의하고, 나중에 확장하거나 구현될 가능성이 있다면 인터페이스(Interface)가 용이합니다.

'객체 외의 타입'을 정의하거나, 복잡한 타입들을 조합하여 새로운 타입을 만들 때 타입 별칭(Type Aliases)이 용이합니다.

즉, 객체의 형태를 정의할 때 interface를 먼저 고려해도 좋으며 확장을 대비하여 지정할 수 있습니다. 또한, interface로 할 수 없는 다른 복합적인 타입 정의가 필요할 때 type을 사용할 수 있습니다. type 또한 인터섹션 타입(&)을 사용하여 확장이 가능합니다.

728x90

'TypeScript' 카테고리의 다른 글

TypeScript란? (0)	2025.06.23

Code Archive :
강현의 개발 오디세이

[Type Script] 타입스크립트의 타입 정리

타입스크립트의 타입

기본 타입 (Primitive Types)

배열 타입 (Array Types)

튜플 타입 (Tuple Types)

열거형 (Enum)

any 타입

void 타입

object 타입

유니언 타입 (Union Types)

타입 별칭 (Type Aliases)

인터페이스 (Interface)

제네릭

인터페이스(Interface)와 타입 별칭(Type Aliases)

'TypeScript' 카테고리의 다른 글

티스토리툴바

Code Archive : 강현의 개발 오디세이

타입스크립트의 타입

기본 타입 (Primitive Types)

배열 타입 (Array Types)

튜플 타입 (Tuple Types)

열거형 (Enum)

any 타입

void 타입

object 타입

유니언 타입 (Union Types)

타입 별칭 (Type Aliases)

인터페이스 (Interface)

제네릭

인터페이스(Interface)와 타입 별칭(Type Aliases)

'TypeScript' 카테고리의 다른 글

티스토리툴바

Code Archive :
강현의 개발 오디세이