TypeScript Course 🔥

0. Overview 🌀

ReactJS와 NestJS를 메인으로 사용하는 개발자로서, 타입스크립트에 대한 명확한 이해는 필수적이겠죠. freeCodeCamp의 타입스크립트 강의 내용을 기반으로, TS의 기초에 대해 정리하겠습니다.

오늘은 Bob Ziroll(밥 지롤) 선생님을 모셨습니다. 발음주의

reference: https://www.youtube.com/watch?v=SpwzRDUQ1GI&t=330s

1. Introduction 🌀

타입스크립트(이하 TS)는 자바스크립트(이하 JS)의 Superset입니다. 즉, JS에 타입 지정 기능을 추가한 프로그래밍 언어가 TS라고 할 수 있습니다. 따라서 모든 유효한 JS 코드는 TS에서도 유효합니다.

Bob Ziroll 선생님께서는, TS가 개발자의 자신감과 생산성을 제고함과 동시에 발생 가능한 문제를 예방할 수 있어서, TS를 배워야 한다고 말씀하십니다. 저도 전적으로 동의합니다.

---

더욱이, 저의 경우 백엔드를 NestJS라는 프레임워크를 사용하여 개발하고 있는데요, NestJS는 TS로 작성된 프레임워크입니다. 빠져나갈 구멍이 없는 것이지요. 피할 수 없으면 즐겨야지요.

Bob Ziroll 선생님의 친구분께서 이런 말씀을 하셨답니다.

TS is not making your life terrible. It's just showing you how terrible your life already is.

인정하기 싫습니다.(정확한 팩트라는 뜻)

간단한 Pizza App을 만들며, TS 관련 이론을 정리하고자 합니다.

2. Pizza App Fundamentals 🌀

2-1. Intro to Pizza App 🟢

// 초기 피자 메뉴 배열. 각 피자는 이름(name)과 가격(price)을 가짐.
const menu = [
  { name: "Margherita", price: 8 },
  { name: "Pepperoni", price: 10 },
  { name: "Hawaiian", price: 10 },
  { name: "Veggie", price: 9 },
];

// 피자 판매 수익을 저장하는 변수.
// const로 선언되어 값 변경이 불가능하지만, 아래에서 변경을 시도함 (의도된 오류).
const cashInRegister = 100;

// 주문에 부여할 고유 ID를 위한 변수.
// const로 선언되어 아래에서 ++ 연산 시 오류 발생 (의도된 오류).
const nextOrderId = 1;

// 현재 처리 중인 주문 목록을 저장할 큐 배열.
const orderQueue = [];

// 새로운 피자 메뉴 항목을 추가하는 함수.
// pizzaObj는 { name: string, price: number } 형식이어야 함.
// 전달된 피자 객체를 메뉴에 추가
function addNewPizza(pizzaObj) {
  menu.push(pizzaObj);
}

// 피자 주문을 생성하고 주문 큐에 추가하는 함수.
// 주문 시 선택한 피자의 가격을 cashInRegister에 추가하고, 주문 객체를 생성함.
// 사용자가 주문한 피자의 이름과 일치하는 항목을 메뉴에서 찾음
// 선택된 피자의 가격을 수익에 더함.
// 하지만 cashInRegister는 const라서 이 줄에서 런타임 에러 발생 예정.
// 새로운 주문 객체를 생성. 고유 ID, 피자 정보, 상태 포함.
// nextOrderId는 const로 선언되어 있어서 ++ 연산 시 에러 발생 예정.
// 생성된 주문을 주문 큐에 추가
// 생성된 주문을 반환
function placeOrder(pizzaName) {
  const selectedPizza = menu.find((pizzaObj) => pizzaObj.name === pizzaName);

  cashInRegister += selectedPizza.price;

  const newOrder = {
    id: nextOrderId++,
    pizza: selectedPizza,
    status: "ordered",
  };

  orderQueue.push(newOrder);

  return newOrder;
}

// 특정 주문을 완료 상태로 변경하는 함수
// 전달된 ID와 일치하는 주문을 주문 큐에서 찾음
// 찾은 주문의 상태를 "complete"으로 변경
// 업데이트된 주문 객체를 반환
function completeOrder(orderId) {
  const order = orderQueue.find((order) => order.id === orderId);

  order.status = "complete";

  return order;
}

// 새로운 피자 항목들을 메뉴에 추가함
// 하지만 price가 아닌 cost라는 잘못된 키를 사용 → 이후 가격 계산 시 문제 발생
addNewPizza({ name: "Chicken Bacon Ranch", cost: 12 });
addNewPizza({ name: "BBQ Chicken", cost: 12 });
addNewPizza({ name: "Spicy Sausage", cost: 11 });

// "Chicken Bacon Ranch" 피자를 주문함
// 위에서 price가 아니라 cost로 추가했기 때문에 selectedPizaa.price는 undefined가 되고,
// cashInRegister += undefined → NaN 발생
placeOrder("Chicken Bacon Ranch");

// 문자열 "1"을 ID로 전달 → 실제 주문 ID는 숫자 1이므로 비교 시 false가 되어
// order는 undefined가 되고, 이후 order.status 접근 시 런타임 에러 발생 가능
completeOrder("1");

// 최종 결과 출력
console.log("Menu: ", menu);
console.log("Cash in register: ", cashInRegister);
console.log("Order Queue: ", orderQueue);

피자 주문 로직을 작성했습니다. 결함이 많은 JS 코드이고, 잠재적인 결함은 주석으로 표기해놓은 상황입니다.

현재의 .js 파일에서 .ts 파일로 동일한 코드를 작성하면, 엄청난 에러 라인을 확인할 수 있게 됩니다.

2-2. Move code to TS 🟢

index.ts 파일을 생성하고, 기존에 index.js에 작성했던 코드를 그대로 옮겼습니다.

간단하게 TypeError: Assignment to constant variable. 부분만 수정해 보겠습니다.

// 피자 판매 수익을 저장하는 변수.
// const로 선언되어 값 변경이 불가능하지만, 아래에서 변경을 시도함 (의도된 오류).
// let으로 수정
let cashInRegister = 100;

// 주문에 부여할 고유 ID를 위한 변수.
// const로 선언되어 아래에서 ++ 연산 시 오류 발생 (의도된 오류).
// let으로 수정
let nextOrderId = 1;

// 현재 처리 중인 주문 목록을 저장할 큐 배열.
const orderQueue = [];

const를 let으로 변경한 것이 중요한 것이 아닙니다.

자바스크립트 코드를 타입스크립트로 전환했을 때 타입스크립트가 잠재적 오류를 즉시 감지하고 보여준다는 점, 그리고 이러한 오류 메시지를 통해 코드의 문제점을 조기에 식별하고 수정할 수 있다는 점이 중요하겠습니다.

2-3. Defensive coding 🟢

코드를 작성하며, 다양한 시나리오를 어떻게 처리할지에 대한 접근 방식에는 두 가지가 있습니다.

Happy Path는, 모든 것이 완벽하게 잘 작동할 것이라고 가정하고 작성하는 코드입니다. 문제 발생 가능성이나 예외 상황을 고려하지 않고, 작업이 성공적으로 완료되는 가장 이상적인 흐름에 초점을 맞춰 코드를 작성하게 됩니다.

반면 Sad Path는, 코드를 작성할 때 문제가 발생할 수 있음을 인지하고, 예외 상황이나 에지 케이스를 예상하여 처리하는 코드입니다. 발생 가능한 문제 상황을 고려하고, 각 문제에 대한 방어적인 코드를 작성하게 되죠.

TS는 개발자가 Sad Path를 고려하도록 강제하는 역할을 합니다. 이전에 작성한 JS 코드를 살펴보겠습니다.

function placeOrder(pizzaName) {
  const selectedPizza = menu.find((pizzaObj) => pizzaObj.name === pizzaName);

  cashInRegister += selectedPizza.price;

  const newOrder = {
    id: nextOrderId++,
    pizza: selectedPizza,
    status: "ordered",
  };

  orderQueue.push(newOrder);

  return newOrder;
}

selectedPizza는, 메뉴에서 고객이 주문한 특정 피자입니다.

만약 고객이 메뉴에 없는 피자를 주문한다면 selectedPizza는 undefined가 됩니다. 후속 코드에서 selectedPizza의 price에 접근하고 있는데, selectedPizza가 undefined라면 런타임 에러가 발생할 것입니다.

selectedPizza가 undefined 인지 확인하는 방어적인 조건문을 작성하는 것이 좋겠습니다.

function placeOrder(pizzaName) {
  const selectedPizza = menu.find((pizzaObj) => pizzaObj.name === pizzaName);

  if (!selectedPizza) {
    console.error(`${pizzaName} does not exist in the menu.`);
    return;
  }

  cashInRegister += selectedPizza.price;

  const newOrder = {
    id: nextOrderId++,
    pizza: selectedPizza,
    status: "ordered",
  };

  orderQueue.push(newOrder);

  return newOrder;
}

🚨 중간 요약
피자 주문 애플리케이션 코드의 JS에서 TS로의 전환 과정과 방어적 코딩의 중요성에 관해 설명했습니다. JS에서 발생하는 여러 잠재적 오류들(상수 재할당, undefined 참조 등)이 TS를 통해 컴파일 시점에 감지될 수 있으며, 'Happy Path'가 아닌 'Sad Path'를 고려한 방어적 코딩 방식을 통해 메뉴에 없는 피자 주문과 같은 예외 상황을 처리하는 중요성을 강조했습니다.

3. TypeScript Basics 🌀

3-1. Obligatory types basics lesson 🟢

Obligatory types란, 말 그대로 TS에서 필수적으로 알아야 하는 기본 타입 개념을 의미합니다.

let myName: string = "minkwan";
let numberOfWheels: number = 4;
let isStudent: boolean = false;

변수의 기본 타입을 설정하는 코드입니다. 위 방식이 Pizza App에서 어떻게 적용되는지 살펴보겠습니다.

3-2. Add type to orderId 🟢

function completeOrder(orderId: number) {
  const order = orderQueue.find((order) => order.id === orderId);

  order.status = "complete";

  return order;
}

completeOrder 함수가 받는 orderId 변수의 기본 타입을 number로 지정했습니다. 따라서 사용처에서는 number를 전달해야 합니다.

completeOrder(1);

문자열이 아니라 number를 적용하게 됩니다.

3-3. Defining Custom Types 🟢

변수가 가져야 할 속성과 각 속성의 타입을 커스텀 할 수 있습니다.

type Person = {
  name: string;
  age: number;
  isStudent: boolean;
};

let person1: Person = {
  name: "Joe",
  age: 42,
  isStudent: true,
};

let person2: Person = {
  name: "minkwan",
  age: 28,
  isStudent: false,
};

person1과 person2는, Person 커스텀 타입에 명시된 내용을 따르게 됩니다.

🚨 중간 요약
TS에서 필수적으로 알아야 할 기본 타입(string, number, boolean 등)을 변수에 지정하는 방식을 확인했습니다. 함수 매개변수에 타입을 명시하여(예: orderId를 number로 지정) 호출 시 적절한 타입만 허용하도록 설정했습니다. 추가적으로, 개발자가 직접 필요한 속성과 그 타입을 정의한 커스텀 타입(예: Person 타입)을 만들어 여러 변수가 동일한 구조를 가지도록 하는 방법을 살펴봤습니다.

4. Working with Types 🌀

4-1. Adding a Pizza type 🟢

위에서 학습한 대로 Pizza라는 커스텀 타입을 생성했습니다.

type Pizza = {
  name: string;
  price: number;
};

메뉴에 새로운 피자를 추가할 때, 위에서 정의한 커스텀 타입을 따르도록 설정했습니다.

function addNewPizza(pizzaObj: Pizza) {
  menu.push(pizzaObj);
}

이전 코드에서 addNewPizza() 함수에 price가 아닌 cost를 전달하는 모습을 확인할 수 있습니다. 커스텀 타입에 맞게 cost를 price로 변경합니다.

addNewPizza({ name: "Chicken Bacon Ranch", cost: 12 });
addNewPizza({ name: "BBQ Chicken", cost: 12 });
addNewPizza({ name: "Spicy Sausage", cost: 11 });

addNewPizza({ name: "Chicken Bacon Ranch", price: 12 });
addNewPizza({ name: "BBQ Chicken", price: 12 });
addNewPizza({ name: "Spicy Sausage", price: 11 });

pizzaName의 타입도 string으로 지정합시다.

function placeOrder(pizzaName: string) {
  const selectedPizza = menu.find((pizzaObj) => pizzaObj.name === pizzaName);

  if (!selectedPizza) {
    console.error(`${pizzaName} does not exist in the menu.`);
    return;
  }

  cashInRegister += selectedPizza.price;

  const newOrder = {
    id: nextOrderId++,
    pizza: selectedPizza,
    status: "ordered",
  };

  orderQueue.push(newOrder);

  return newOrder;
}

...

placeOrder("Chicken Bacon Ranch");

...

4-2. Nested object types 🟢

TS에서 중첩 객체 타입(Nested Object Types)을 정의하는 두 가지 방법에 대해 소개하고자 합니다.

address를 Person 타입 안에서 직접 객체 구조로 정의할 수 있습니다. address 구조가 반복되면 중복이 생기고, 재사용성이 떨어질 수 있겠습니다.

type Person = {
  name: string;
  age: number;
  isStudent: boolean;
  address: {
    street: string;
    city: string;
    country: string;
  };
};

let person1: Person = {
  name: "Joe",
  age: 42,
  isStudent: true,
  address: {
    street: "123 Main",
    city: "Anytown",
    country: "USA",
  },
};

let person2: Person = {
  name: "minkwan",
  age: 28,
  isStudent: false,
  address: {
    street: "123 Main",
    city: "Anytown",
    country: "USA",
  },
};

이번엔 address의 타입을 따로 Address 타입으로 분리했습니다. Person 타입은 이제 address: Address라고 명시해서 Address 타입을 사용할 수 있게 되었습니다. 다른 타입에서도 Address 타입을 사용할 수 있습니다.

type Address = {
  street: string;
  city: string;
  country: string;
};

type Person = {
  name: string;
  age: number;
  isStudent: boolean;
  address: Address;
};

let person1: Person = {
  name: "Joe",
  age: 42,
  isStudent: true,
  address: {
    street: "123 Main",
    city: "Anytown",
    country: "USA",
  },
};

let person2: Person = {
  name: "minkwan",
  age: 28,
  isStudent: false,
  address: {
    street: "123 Main",
    city: "Anytown",
    country: "USA",
  },
};

4-3. Optional properties 🟢

속성 이름 뒤에 ?를 붙이면, 해당 속성을 optional 하게 사용할 수 있게 됩니다. person1에서 address를 사용하지 않아도 에러가 발생하지 않게 됩니다.

type Address = {
  street: string;
  city: string;
  country: string;
};

type Person = {
  name: string;
  age: number;
  isStudent: boolean;
  address?: Address;
};

let person1: Person = {
  name: "Joe",
  age: 42,
  isStudent: true,
};

let person2: Person = {
  name: "minkwan",
  age: 28,
  isStudent: false,
  address: {
    street: "123 Main",
    city: "Anytown",
    country: "USA",
  },
};

그런데 속성을 optional 하게 지정할 때에는 주의해야 할 점이 있습니다.

function displayInfo(person) {
  console.log(person.name);
  console.log(person.address?.street);
}

displayInfo(person1);

위 코드를 실행하면 person1에는 address 속성이 없기 때문에, 단순히 person.address.street로 접근하면 에러가 발생하게 됩니다. optional 하게 지정한 만큼, 타입 안정성이 감소된 것이지요. 그래서 위 코드처럼 person.address?.street로 옵셔널 체이닝을 적용하는 것이 좋습니다.

4-4. Adding an Order type 🟢

Order type을 만들어보겠습니다.

type Order = {
  id: number;
  pizza: Pizza;
  status: string;
};

Order type을 orderQueue에 적용합니다.

const orderQueue: Order = [];

Order는 객체 타입인데 orderQueue는 배열이라는 문제점이 있습니다.

4-5. Typing arrays 🟢

type Person = {
  name: string;
  age: number;
  isStudent: boolean;
};

let person1: Person = {
  name: "Joe",
  age: 42,
  isStudent: true,
};

let person2: Person = {
  name: "minkwan",
  age: 28,
  isStudent: false,
};

let people: Person[] = [person1, person2];

핵심은 let people: Person[] = [person1, person2];입니다.

people이 Person 객체들로 구성된 배열 타입임을 명시하는 코드입니다. 이 내용을 Pizza App에 적용해 보겠습니다.

4-6. Type orderQueue 🟢

orderQueue가 Order로 구성된 '배열 타입'임을 명시합니다.

const orderQueue: Order[] = [];

function completeOrder(orderId: number) {
  const order = orderQueue.find((order) => order.id === orderId);

  order.status = "complete";

  return order;
}

order 값이 없을 수도 있겠죠. 이에 대한 방어적인 코드를 작성합니다.

function completeOrder(orderId: number) {
  const order = orderQueue.find((order) => order.id === orderId);

  if (!order) {
    console.error(`${orderId} was not found.`);
    return;
  }

  order.status = "complete";

  return order;
}

모든 오류가 수정된 TS 코드는 다음과 같습니다.

type Pizza = {
  name: string;
  price: number;
};

type Order = {
  id: number;
  pizza: Pizza;
  status: string;
};

const menu = [
  { name: "Margherita", price: 8 },
  { name: "Pepperoni", price: 10 },
  { name: "Hawaiian", price: 10 },
  { name: "Veggie", price: 9 },
];

let cashInRegister = 100;

let nextOrderId = 1;

const orderQueue: Order[] = [];

function addNewPizza(pizzaObj: Pizza) {
  menu.push(pizzaObj);
}

function placeOrder(pizzaName: string) {
  const selectedPizza = menu.find((pizzaObj) => pizzaObj.name === pizzaName);

  if (!selectedPizza) {
    console.error(`${pizzaName} does not exist in the menu.`);
    return;
  }

  cashInRegister += selectedPizza.price;

  const newOrder = {
    id: nextOrderId++,
    pizza: selectedPizza,
    status: "ordered",
  };

  orderQueue.push(newOrder);

  return newOrder;
}

function completeOrder(orderId: number) {
  const order = orderQueue.find((order) => order.id === orderId);

  if (!order) {
    console.error(`${orderId} was not found.`);
    return;
  }

  order.status = "complete";

  return order;
}

addNewPizza({ name: "Chicken Bacon Ranch", price: 12 });
addNewPizza({ name: "BBQ Chicken", price: 12 });
addNewPizza({ name: "Spicy Sausage", price: 11 });

placeOrder("Chicken Bacon Ranch");

completeOrder(1);

console.log("Menu: ", menu);
console.log("Cash in register: ", cashInRegister);
console.log("Order Queue: ", orderQueue);

🚨 중간 요약
TS에서 타입 시스템을 활용하여 피자 주문 애플리케이션의 코드 안정성을 향상시키는 과정을 보여줍니다. Pizza와 Order 같은 커스텀 타입을 정의하고, 함수 매개변수에 타입을 지정하며, 중첩 객체 타입을 분리하여 재사용성을 높이고, 옵셔널 프로퍼티를 통해 유연성을 제공하며, 배열 타입을 명시하고, 불확실한 값에 대한 방어적 코딩을 추가함으로써 코드 결함을 컴파일 시점에 감지하고 런타임 오류를 방지하는 TS의 강력한 타입 시스템의 활용을 종합적으로 설명합니다.

5. Advanced Type Features 🌀

5-1. Literal types 🟢

리터럴 타입이란, 값 자체를 타입으로 지정하는 것을 뜻합니다.

let myName: "Bob" = "Bobby"
const myName2: "Bob" = "Bobby"

myName과 myName2는 모두 "Bob" 자체가 타입인데 값은 "Bobby"이므로, 위 코드에서는 타입 불일치 오류가 발생하게 됩니다.

5-2. Unions 🟢

리터럴 타입이 값 자체가 타입이 되는 케이스를 뜻한다면, 여러 리터럴 타입 중 하나만 허용되는 타입을 유니온 타입이라고 합니다.

type User = {
    username: string
    role: "guest" | "member" | "admin"
}

type UserRole = "guest" | "member" | "admin"

let userRole: UserRole = "member"

5-3. Update order status to use literal type unions 🟢

Order 타입의 status 속성에 유니온 타입을 적용합시다.

type Order = {
  id: number;
  pizza: Pizza;
  status: "ordered" | "completed";
};

이후 newOrder에 Order 타입을 적용합니다.

function placeOrder(pizzaName: string) {
  const selectedPizza = menu.find((pizzaObj) => pizzaObj.name === pizzaName);

  if (!selectedPizza) {
    console.error(`${pizzaName} does not exist in the menu.`);
    return;
  }

  cashInRegister += selectedPizza.price;

  const newOrder: Order = {
    id: nextOrderId++,
    pizza: selectedPizza,
    status: "ordered",
  };

  orderQueue.push(newOrder);

  return newOrder;
}

order.status도 complete에서 completed로 변경합니다.

function completeOrder(orderId: number) {
  const order = orderQueue.find((order) => order.id === orderId);

  if (!order) {
    console.error(`${orderId} was not found.`);
    return;
  }

  order.status = "completed";

  return order;
}

5-4. Add ids to pizzas 🟢

이제 Pizza 타입에 id를 추가합니다.

type Pizza = {
  id: number;
  name: string;
  price: number;
};

menu에 변경된 Pizza 타입을 적용합니다.

const menu: Pizza[] = [
  { name: "Margherita", price: 8 },
  { name: "Pepperoni", price: 10 },
  { name: "Hawaiian", price: 10 },
  { name: "Veggie", price: 9 },
];

id를 추가해야겠죠.

const menu: Pizza[] = [
  { id: 1, name: "Margherita", price: 8 },
  { id: 2, name: "Pepperoni", price: 10 },
  { id: 3, name: "Hawaiian", price: 10 },
  { id: 4, name: "Veggie", price: 9 },
];

메뉴가 추가되는 부분에도 id를 추가합니다.

addNewPizza({ id: 5, name: "Chicken Bacon Ranch", price: 12 });
addNewPizza({ id: 6, name: "BBQ Chicken", price: 12 });
addNewPizza({ id: 7, name: "Spicy Sausage", price: 11 });

5-5. Type Narrowing 🟢

이제 Type Narrowing이 무엇인지 알아보죠.

getPizzaDetail() 함수를 생성했습니다.

function getPizzaDetail(identifier: string | number) {
  if (typeof identifier === "string") {
    return menu.find(
      (pizza) => pizza.name.toLowerCase() === identifier.toLowerCase()
    );
  } else {
    return menu.find((pizza) => pizza.id === identifier);
  }
}

Type Narrowing 이란 유니언 타입 등 넓은 범위의 타입에서, 실제 코드 흐름에 따라 더 구체적인 타입으로 "좁혀서" 다루는 것을 의미합니다. 위 코드는 식별자의 타입을 string 또는 number로 좁힌 것입니다.

5-6. Be explicit whenever you can 🟢

getPizzaDetail() 함수를 조금 더 디테일하게 수정했습니다. 만약 해당 함수로 boolean 값이 들어오면 TypeError가 출력될 것입니다.

export function getPizzaDetail(identifier: string | number) {
  if (typeof identifier === "string") {
    return menu.find(
      (pizza) => pizza.name.toLowerCase() === identifier.toLowerCase()
    );
  } else if (typeof identifier === "number") {
    return menu.find((pizza) => pizza.id === identifier);
  } else {
    throw new TypeError(
      "Parameter 'identifier' must be either a string or number."
    );
  }
}

🚨 중간 요약
리터럴 타입이 값 자체를 타입으로 사용하는 방식, 유니온 타입이 여러 가능한 값 중 하나를 허용하는 방식(예: "ordered" | "completed")임을 확인했습니다. 그리고 타입 내로잉을 통해 string 또는 number와 같은 유니온 타입에서 조건문을 활용해 더 구체적인 타입으로 좁혀 안전하게 작업하는 방법을 포함하여, 명시적인 타입 지정이 타입스크립트의 강력한 타입 안전성을 최대한 활용하는 핵심임을 학습했습니다.

6. Function Typing 🌀

6-1. Function return types 🟢

type UserRole = "guest" | "member" | "admin";

type User = {
  username: string;
  role: UserRole;
};

const users: User[] = [
  { username: "john_doe", role: "member" },
  { username: "minkwan", role: "admin" },
  { username: "guest_user", role: "guest" },
];

function fetchUserDetails(username: string): User {
  const user = users.find((user) => user.username === username);
  if (!user) {
    throw new Error(`User with username ${username} not found.`);
  }
  return user;
}

: User 부분이 함수가 반환하는 user의 타입을 의미합니다.

6-2. TS-specific types: any 🟢

value의 type을 any로 지정했습니다.

let value: any = 1;
value.toUpperCase();
value = "Hi";
value.map();

number에 대해서 toUpperCase()를 수행하려 하고, string에 대해서는 map()을 적용하려 하고 있습니다.

any는 쓰지 않는 것이 좋습니다. TS의 타입 검사의 이점을 무력화하기 때문입니다.

단, JS를 TS로 변경하는 과정에서 당장 모든 타입을 정의하기 어려운 상황이라면 일시적으로 TS 검사 우회를 위해 any를 사용할 수는 있습니다.

6-3. Add return type to getPizzaDetail 🟢

함수의 return type을 적용하는 것에는 큰 어려움이 없습니다.

export function getPizzaDetail(identifier: string | number): Pizza | undefined {
  if (typeof identifier === "string") {
    return menu.find(
      (pizza) => pizza.name.toLowerCase() === identifier.toLowerCase()
    );
  } else if (typeof identifier === "number") {
    return menu.find((pizza) => pizza.id === identifier);
  } else {
    throw new TypeError(
      "Parameter 'identifier' must be either a string or number."
    );
  }
}

6-4. Void return type 🟢

void는 "아무것도 반환하지 않음"을 명시적으로 표현하는 타입입니다.

function addNewPizza(pizzaObj: Pizza): void {
  menu.push(pizzaObj);
}

위 함수는 menu에 새로운 pizza를 추가할 뿐 어떠한 값도 '반환'하지 않기에 void 타입이라고 명시해 줍니다.

6-5. Add automatic ids to menu items 🟢

id 자동 증가를 위해 다음 코드를 추가합니다.

let nextPizzaId = 1;

id를 증가시키는 로직을 추가합니다.

function addNewPizza(pizzaObj: Pizza): void {
  pizzaObj.id = nextPizzaId++;
  menu.push(pizzaObj);
}

최종 메뉴의 형태는 아래와 같습니다.

const menu: Pizza[] = [
  { id: nextPizzaId++, name: "Margherita", price: 8 },
  { id: nextPizzaId++, name: "Pepperoni", price: 10 },
  { id: nextPizzaId++, name: "Hawaiian", price: 10 },
  { id: nextPizzaId++, name: "Veggie", price: 9 },
];

🚨 중간 요약
TS의 함수에는 반환 타입(User와 같은 특정 타입이나 Pizza | undefined처럼 유니온 타입으로 반환값 지정)을 명시할 수 있습니다. any 타입의 위험성(타입 검사를 무력화하므로 가급적 사용 자제)과 void 타입(아무것도 반환하지 않는 함수의 반환 타입 명시)을 설명했습니다. 제시한 개념들을 활용해 피자 메뉴 관리 시스템에서 사용자 정보 가져오기, 피자 정보 조회, 메뉴 아이템 추가 등의 함수에 타입 안전성을 부여하고, 자동 증가하는 ID를 구현하여 명시적인 타입 지정이 코드의 안정성과 가독성을 향상시킨 다는 것을 확인했습니다.

7. Advanced TypeScript Features 🌀

7-1. Utility Types & Partial 🟢

Utility Types은 TS가 자주 쓰이는 타입 변형을 쉽게 할 수 있도록 제공하는 기본 타입입니다.

그중 Partial<T>는 T 타입의 모든 속성을 optional 하게 만들어줍니다.

type User = {
    id: number
    username: string
    role: "member" | "contributor" | "admin"
}

type UpdatedUser = Partial<User>

const users: User[] = [
    { id: 1, username: "john_doe", role: "member" },
    { id: 2, username: "jane_smith", role: "contributor" },
    { id: 3, username: "alice_jones", role: "admin" },
    { id: 4, username: "charlie_brown", role: "member" },
];

function updateUser(id: number, updates: UpdatedUser) {
    // Find the user in the array by the id
    const foundUser = users.find(user => user.id === id)
    if (!foundUser) {
        console.error("User not found!")
        return
    }
    // Use Object.assign to update the found user in place. 
    Object.assign(foundUser, updates)
}

// Example updates:
updateUser(1, { username: "new_john_doe" });
updateUser(4, { role: "contributor" });

console.log(users)

type UpdatedUser = Partial<User> 부분에 의해 User의 모든 속성이 optional 하게 됩니다.

즉, username 속성만 포함된 객체가 있다고 하면, 해당 객체를 UpdatedUser에 할당할 수 있게 되고, 이를 통해 일부 필드에 대해서만 업데이트가 가능해집니다.

7-2. Omit Utility Type 🟢

Omit<T, K>도 TS 내장 유틸리티 타입 중 하나입니다.

T 타입에서 K로 지정한 속성을 제외한 타입을 반환합니다.

type User = {
    id: number
    username: string
    role: "member" | "contributor" | "admin"
}

type UpdatedUser = Partial<User>

let nextUserId = 1

const users: User[] = [
    { id: nextUserId++, username: "john_doe", role: "member" },
    { id: nextUserId++, username: "jane_smith", role: "contributor" }
];

function updateUser(id: number, updates: UpdatedUser) {
    const foundUser = users.find(user => user.id === id)
    if (!foundUser) {
        console.error("User not found!")
        return
    }
    Object.assign(foundUser, updates)
}

// updateUser(1, { username: "new_john_doe" });
// updateUser(4, { role: "contributor" });

function addNewUser(newUser: Omit<User, "id" | "user">): User {
    const user: User = {
        id: nextUserId++,
        ...newUser
    }
    users.push(user)
    return user
}

// example usage:
addNewUser({ username: "joe_schmoe", role: "member" })

console.log(users)

addNewUser() 함수는 새로운 사용자를 users 배열에 추가하는 함수입니다. 이때 Omit<User, "id" | "username">는 User 타입에서 id와 username 속성을 제외한 타입을 나타냅니다. 즉, 새로운 사용자를 추가할 때 id와 username을 제외한 객체만 받도록 제한하고 있습니다.

불필요한 속성을 제거하여, 유효한 조작만 허용하고자 할 때 사용합니다.

7-3. Fix TS warnings with Omit 🟢

Pizza App에 Omit<T, K>을 적용하면, 코드가 다음과 같이 변경됩니다.

function addNewPizza(pizzaObj: Omit<Pizza, "id">): Pizza {
  const newPizza: Pizza = {
    id: nextPizzaId++,
    ...pizzaObj,
  };
  menu.push(newPizza);
  return newPizza;
}

addNewPizza({ name: "Chicken Bacon Ranch", price: 12 });
addNewPizza({ name: "BBQ Chicken", price: 12 });
addNewPizza({ name: "Spicy Sausage", price: 11 });

7-4. Generics 🟢

제네릭(Generic)은 함수, 클래스, 인터페이스 등이 여러 타입에서 재사용될 수 있도록 만드는 TypeScript의 기능입니다. 타입을 나중에 넣을 수 있게 만드는 타입 변수라고 할 수 있습니다.

const gameScores = [14, 21, 33, 42, 59]
const favoriteThings = ["raindrops on roses", "whiskers on kittens", "bright copper kettles", "warm woolen mittens"];
const voters = [{ name: "Alice", age: 42 }, { name: "Bob", age: 77 }]

function getLastItem<Type>(array: Type[]): Type | undefined {
    return array[array.length - 1]
}

console.log(getLastItem(gameScores))
console.log(getLastItem(favoriteThings))
console.log(getLastItem(voters))

콘솔을 보면, getLastItem() 함수에 각각 다른 배열을 전달하는 모습을 확인할 수 있습니다. 각 배열의 마지막 요소에 대한 정보가 출력됩니다.

기본 형태는 위와 같고, 실제로 제네릭 타입을 전달하는 과정을 Pizza App 상에 구현해 보겠습니다.

7-5. Generic functions in the pizza restaurant 🟢

Pizza App에 제네릭 타입을 적용해 보겠습니다.

function addToArray<T>(array: T[], item: T): T[] {
  array.push(item);
  return array;
}

위 함수는 array와 item을 받는데요, 이 둘이 동일한 타입이라고 가정합니다. 여기서 T는 특정 타입을 나타내는, 대체 가능한 변수입니다.

addToArray(menu, { id: nextPizzaId++, name: "Chicken Bacon Ranch", price: 12 });
addToArray(orderQueue, { id: nextOrderId++, pizza: menu[2], status: "done" });

menu의 타입은 Pizza[]입니다. 따라서 T는 Pizza로 자동 추론됩니다.

orderQueue의 타입은 Order[]입니다. 따라서 T는 Order로 추론되죠.

7-6. Explicitly type generic function calls 🟢

명시적으로 제네릭을 사용하기 위해서는 코드를 다음과 같이 수정하면 되겠습니다.

addToArray<Pizza>(menu, { id: nextPizzaId++, name: "Chicken Bacon Ranch", price: 12 })
addToArray<Order>(orderQueue, { id: nextOrderId++, pizza: menu[2], status: "completed" })

최종적으로 완성된 Pizza App은 다음과 같습니다.

type Pizza = {
  id: number;
  name: string;
  price: number;
};

type Order = {
  id: number;
  pizza: Pizza;
  status: "ordered" | "completed";
};

let cashInRegister = 100;
let nextOrderId = 1;
let nextPizzaId = 1;

const menu: Pizza[] = [
  { id: nextPizzaId++, name: "Margherita", price: 8 },
  { id: nextPizzaId++, name: "Pepperoni", price: 10 },
  { id: nextPizzaId++, name: "Hawaiian", price: 10 },
  { id: nextPizzaId++, name: "Veggie", price: 9 },
];

const orderQueue: Order[] = [];

function addNewPizza(pizzaObj: Pizza): Pizza {
  menu.push(pizzaObj);
  return pizzaObj;
}

function placeOrder(pizza: Pizza): Order | undefined {
  const newOrder: Order = {
    id: nextOrderId++,
    pizza: pizza,
    status: "ordered",
  };
  orderQueue.push(newOrder);
  cashInRegister += pizza.price;
  return newOrder;
}

function addToArray<T>(array: T[], item: T): T[] {
  array.push(item);
  return array;
}

addToArray<Pizza>(menu, {
  id: nextPizzaId++,
  name: "Chicken Bacon Ranch",
  price: 12,
});
addToArray<Order>(orderQueue, {
  id: nextOrderId++,
  pizza: menu[2],
  status: "completed",
});

console.log(menu);
console.log(orderQueue);

function completeOrder(orderId: number): Order | undefined {
  const order = orderQueue.find((order) => order.id === orderId);
  if (!order) {
    console.error(`${orderId} was not found in the orderQueue`);
    return;
  }
  order.status = "completed";
  return order;
}

export function getPizzaDetail(identifier: string | number): Pizza | undefined {
  if (typeof identifier === "string") {
    return menu.find(
      (pizza) => pizza.name.toLowerCase() === identifier.toLowerCase()
    );
  } else if (typeof identifier === "number") {
    return menu.find((pizza) => pizza.id === identifier);
  } else {
    throw new TypeError(
      "Parameter `identifier` must be either a string or a number"
    );
  }
}

🚨 중간 요약
TS의 고급 기능인 유틸리티 타입과 제네릭에 관한 내용이었습니다. Partial<T>는 타입의 모든 속성을 선택적으로 만들어 일부 필드만 업데이트할 수 있게 합니다. Omit<T, K>는 특정 속성을 제외한 새로운 타입을 생성하죠. 끝으로, 제네릭은 함수나 클래스가 다양한 타입에서 재사용될 수 있도록 타입 변수를 활용하는 기능으로, 이를 통해 코드의 유연성과 재사용성을 높일 수 있습니다.

8. Conclusion 🌀

타입스크립트의 기본 개념을 학습하면서 많은 내용을 익혔지만, 아직 다루지 못한 부분도 많아 추가적인 학습이 필요하다는 점을 느꼈습니다.

타입스크립트는 코드의 타입 안정성을 높이기 위한 도구입니다. 우리가 살펴본 기능들을 반드시 모두 적용해야 하는 것은 아닙니다. 기술 자체가 목적이 되어서는 안 됩니다.

중요한 것은 프로젝트의 특성과 상황에 맞게 타입스크립트를 적절히 활용함으로써 전체적인 안정성과 유지보수성을 높이는 것입니다.