타입스크립트의 타입

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

기본 타입 (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 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

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

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 또한 인터섹션 타입(&)을 사용하여 확장이 가능합니다.

타입스크립트란?

타입스립트란 자바스크립트에 타입을 부여한 언어입니다. 타입스크립트는 자바스크립트와 다르게 브라우저에서 실행하기 위하여 변환하는 '컴파일(compile)' 과정이 필요합니다.

타입스크립트를 사용하는 이유

에러의 사전 방지

자바스크립트는 유연함이 장점인 언어이지만 데이터를 확정짓는 능력은 부족합니다. 이러한 자바스크립트의 안정성과 구조를 더해주는 도구인 타입스크립트를 사용하고, 컴파일 과정을 통하여 데이터를 확정짓는 능력을 축소하며 의도하지 않은 코드의 동작을 막을 수 있습니다.

코드 가독성 및 유지보수성 향상

코드에 명시적으로 타입 정보가 드러나므로, 개발자가 변수나 함수의 역할과 데이터를 더 쉽게 이해할 수 있습니다. 이는 팀원 간의 협업이나 시간이 지난 후 코드를 다시 볼 때 매우 유용합니다.

확장성과 안정성

 대규모 프로젝트에서 복잡한 구조를 관리하고 예측 불가능한 버그를 줄이는 데 큰 도움이 됩니다.