TypeScript Chapter. 2

TypeScript

---

Type

type alias

기존 타입 및 특정 값에 타입 별칭을 붙여 사용하는 기능을 말한다.

type UserID = string;

type User = {
  id: UserID;
  name: string;
  email: string;
};

array

const array_1: string[] = ['🍓', '🍊', '🍑'];
const array_2: Array<number> = [1, 2, 3, 4, 5];

• readonly: 타입 앞에 readonly를 붙여 배열 요소를 변경하거나 배열 자체를 수정할 수 없도록 만든다.

object

객체의 형태와 구조를 보장하며,
예상치 못한 속성이 들어가는 것을 방지한다.

let car: { manufacturer: string; model: string; year: number };

car = {
  manufacturer: 'Hyundai',
  model: 'Kona',
  year: 2024,
};

• optional: 속성명 뒤에 ?를 붙여 해당 속성이 필수가 아님을 나타낸다.
• readonly: 속성명 앞에 readonly를 붙여 속성에 대한 값을 수정이 불가능하도록 만든다.

function

함수의 파라미터 및 반환값에 대한 타입 지정하며,
예상치 못한 타입의 인자가 전달 및 반환되거나
올바르지 않은 파라미터의 개수가 전달되는 것을 방지한다.

function add(a: number, b: number, c: number = 3, d?: number): number {
  if (!d) {
    return a + b + c;
  }
  return a + b + c + d;
}

add(1, 1, 1, 1); // 4
add(1, 1, 1); // 3
add(1, 1); // 5

• 파라미터의 기본값 지정
  파라미터의 타입 지정 후 = 뒤에 해당 파라미터가 전달되지 않았을 경우 그 값을 대신할 기본 값을 설정할 수 있다.
  기본 값이 지정된 파라미터는 optional 표시를 붙일 수 없다.

• optional: 매개변수 이름 뒤에 ?를 붙여 해당 매개변수는 필수가 아님을 나타낸다.
  optional 파라미터에 값이 전달되지 않은 경우, undefined으로 설정된다.
  optional 파라미터의 경우, 기본값 설정할 수 없다.

• 반환값이 없을 때 타입 지정

  • void: 반환값이 없음을 명시적으로 나타냄
  • never: 반환값이 없음을 엄격하게 나타냄 (?)

union

여러 타입을 하나의 변수에 할당하며 각 타입을 |으로 구분한다.

• 유니언 타입: 변수에 여러 타입 중 하나를 허용
• 리터럴 타입 유니언: 제한된 값 집합을 허용

let userId: string | number;
userId = 1;
userId = '1';

type Size = 'xs' | 's' | 'm' | 'l' | 'xl';
let tShirtSize: Size;

interface

객체의 구조 및 형태를 정의하며,
extends 키워드를 이용하여 다른 interface와 확장 및 조합이 가능하다.

interface Person {
  name: string;
  age: number;
}

interface Student extends Person {
  studentId: number;
  study(): void;
}

const student: Student = {
  name: 'Amy',
  age: 20,
  studentId: 1234,
  study() {
    console.log('studying...');
  },
};

• optional: 속성명 뒤에 ?를 붙여 해당 속성이 필수가 아님을 나타낸다.
• readonly: 속성명 앞에 readonly를 붙여 속성에 대한 값을 수정이 불가능하도록 만든다.

tuple

고정된 크기의 배열로,
각 요소가 다른 타입을 가질 수 있으며, 요소의 타입 순서를 지켜야 한다.

let myTuple: [string, number, boolean];

myTuple = ['Hello', 123, true];

enum

여러 상수 값들을 그룹화하기 위한 방식으로,
값을 지정하지 않으면 0부터 1씩 증가하는 값이 할당된다.

enum Direction {
  North, // 0
  East, // 1
  South, // 2
  West, // 3
}

const currentDirection: Direction = Direction.North;
console.log(currentDirection); // 0
console.log(Direction[0]); // "North"

enum Status {
  Pending = 1, // 1
  InProgress, // 2
  Completed, // 3
  Failed = 10, // 10
  Cancelled, // 11
}

console.log(Status.Pending); // 1
console.log(Status.Completed); // 3
console.log(Status.Cancelled); // 11

enum Color {
  Red = 'RED',
  Green = 'GREEN',
  Blue = 'BLUE',
}

console.log(Color.Red); // "RED"
console.log(Color.Green); // "GREEN"