typeof 연산자: 값의 타입을 타입으로 사용하기 🕵️‍♂️

안녕, 친구들! 오늘은 TypeScript의 꿀팁 중 하나인 'typeof 연산자'에 대해 재밌게 알아볼 거야. 이 녀석이 어떻게 값의 타입을 타입으로 사용하는지 함께 파헤쳐보자고! 🚀

typeof 연산자란? 🤔

자, 먼저 typeof 연산자가 뭔지 알아보자. 이 녀석은 JavaScript에서 온 친구인데, TypeScript에서는 더 강력한 힘을 발휘해. 간단히 말하면, 어떤 값의 타입을 알려주는 마법 지팡이 같은 거야.

예를 들어볼까?

let myNumber = 42;
console.log(typeof myNumber); // "number"

let myString = "Hello, TypeScript!";
console.log(typeof myString); // "string"

let myBoolean = true;
console.log(typeof myBoolean); // "boolean"

이렇게 typeof는 우리가 가진 값의 타입을 문자열로 알려줘. 근데 TypeScript에서는 이게 끝이 아니야. 더 재밌는 걸 할 수 있지!

TypeScript에서의 typeof: 값의 타입을 타입으로! 🎭

TypeScript에서 typeof는 단순히 타입을 확인하는 것을 넘어서, 그 타입 자체를 새로운 타입으로 사용할 수 있게 해줘. 이게 무슨 말인지 예제로 살펴보자.

let originalNumber = 42;
type NumberType = typeof originalNumber;

// NumberType은 이제 'number' 타입이 됐어!
let anotherNumber: NumberType = 10; // 완전 OK
let wrongType: NumberType = "Not a number"; // 에러 발생!

와우! 😲 방금 우리는 originalNumber의 타입을 가져와서 새로운 타입 NumberType을 만들었어. 이제 NumberType은 number 타입과 똑같이 동작하지. 이게 바로 typeof의 마법이야!

typeof의 실전 활용: 복잡한 객체 다루기 🏗️

typeof의 진가는 복잡한 객체를 다룰 때 더욱 빛을 발해. 예를 들어, API 응답 같은 복잡한 객체의 타입을 정의할 때 아주 유용하지.

const apiResponse = {
  id: 1,
  username: "typescript_lover",
  posts: [
    { id: 1, title: "TypeScript is Awesome!" },
    { id: 2, title: "Why I Love typeof" }
  ],
  metadata: {
    lastLogin: "2023-04-01",
    followers: 1000
  }
};

type ApiResponseType = typeof apiResponse;

// 이제 ApiResponseType은 apiResponse와 완전히 같은 구조를 가진 타입이 됐어!

이렇게 하면 복잡한 객체의 타입을 일일이 정의하지 않아도 돼. typeof가 자동으로 모든 구조를 파악해서 타입을 만들어주니까 얼마나 편한 거야! 😄

함수와 typeof: 반환 타입 추론하기 🔍

함수의 반환 타입을 정의할 때도 typeof를 사용할 수 있어. 특히 복잡한 함수의 경우에 아주 유용하지!

function createUser(name: string, age: number) {
  return {
    name,
    age,
    createdAt: new Date(),
    greet() {
      console.log(`Hello, I'm ${name}!`);
    }
  };
}

type User = ReturnType<typeof createuser>;

// User 타입은 이제 createUser 함수의 반환 타입과 동일해!</typeof>

여기서 우리는 ReturnType과 typeof를 조합해서 사용했어. ReturnType은 함수의 반환 타입을 가져오는 유틸리티 타입이고, typeof는 createUser 함수 자체의 타입을 가져오는 역할을 했지. 이 둘을 합치면 createUser 함수가 반환하는 객체의 정확한 타입을 얻을 수 있어!

typeof와 keyof의 환상적인 콤보 🤜🤛

typeof는 혼자서도 강력하지만, keyof와 함께 쓰면 더욱 강력해져. keyof는 객체의 키들을 유니온 타입으로 만들어주는 연산자야.

const colors = {
  red: "#FF0000",
  green: "#00FF00",
  blue: "#0000FF"
};

type ColorKeys = keyof typeof colors;
// ColorKeys는 "red" | "green" | "blue" 타입이 돼!

function getColorCode(color: ColorKeys) {
  return colors[color];
}

console.log(getColorCode("red")); // "#FF0000"
console.log(getColorCode("yellow")); // 에러! "yellow"는 ColorKeys에 없어.

이 예제에서 우리는 typeof로 colors 객체의 타입을 가져오고, keyof로 그 타입의 키들을 추출했어. 이렇게 하면 colors 객체에 있는 키들만 사용할 수 있는 타입 안전한 함수를 만들 수 있지!

typeof의 한계: 주의해야 할 점들 ⚠️

typeof가 강력하긴 하지만, 몇 가지 주의해야 할 점들이 있어:

• null과 undefined: typeof null은 "object"를 반환해. 이건 JavaScript의 오래된 버그야. 그리고 typeof undefined는 "undefined"를 반환하고.
• 배열: typeof []는 "object"를 반환해. 배열인지 확실히 알려면 Array.isArray()를 사용해야 해.
• 함수: typeof로 함수를 체크하면 "function"을 반환하지만, 이건 JavaScript 명세에는 없는 거야. 대부분의 환경에서 잘 동작하긴 해.

이런 한계들 때문에 typeof만으로는 부족할 때가 있어. 그럴 때는 다른 타입 가드나 타입 체크 방법을 함께 사용해야 해.

typeof와 조건부 타입: 고급 테크닉 🎓

typeof는 조건부 타입과 함께 사용하면 더욱 강력한 타입 로직을 만들 수 있어. 조건부 타입은 특정 조건에 따라 다른 타입을 선택할 수 있게 해주는 TypeScript의 고급 기능이야.

type TypeName<t> =
  T extends string ? "string" :
  T extends number ? "number" :
  T extends boolean ? "boolean" :
  T extends undefined ? "undefined" :
  T extends Function ? "function" :
  "object";

function getTypeName<t>(value: T): TypeName<t> {
  return typeof value as TypeName<t>;
}

console.log(getTypeName("hello")); // "string"
console.log(getTypeName(42)); // "number"
console.log(getTypeName(true)); // "boolean"
console.log(getTypeName(undefined)); // "undefined"
console.log(getTypeName(() => {})); // "function"
console.log(getTypeName({})); // "object"</t></t></t></t>

이 예제에서 우리는 typeof와 조건부 타입을 결합해서 더 정확한 타입 이름을 반환하는 함수를 만들었어. 이렇게 하면 typeof의 한계를 어느 정도 극복할 수 있지!

실전 예제: API 응답 타입 자동화하기 🤖

이제 우리가 배운 걸 활용해서 실제 상황에서 어떻게 쓸 수 있는지 볼까? API 응답의 타입을 자동으로 생성하는 예제를 만들어보자!

// API 응답을 시뮬레이션하는 함수
function fetchUserData(userId: number) {
  return {
    id: userId,
    name: "John Doe",
    email: "john@example.com",
    registeredAt: new Date(),
    preferences: {
      theme: "dark",
      notifications: true
    }
  };
}

// API 응답의 타입을 자동으로 추론
type UserData = ReturnType<typeof fetchuserdata>;

// 이제 UserData 타입을 사용할 수 있어!
function processUserData(user: UserData) {
  console.log(`Processing user: ${user.name}`);
  console.log(`Email: ${user.email}`);
  console.log(`Registered: ${user.registeredAt.toLocaleDateString()}`);
  console.log(`Theme preference: ${user.preferences.theme}`);
}

const user = fetchUserData(1);
processUserData(user);
</typeof>

이 예제에서 우리는 ReturnType과 typeof를 사용해서 fetchUserData 함수의 반환 타입을 자동으로 UserData 타입으로 정의했어. 이렇게 하면 API 응답의 구조가 변경되더라도 우리의 타입 정의는 자동으로 업데이트돼. 얼마나 편리한 거야! 😎

typeof와 제네릭: 유연한 타입 설계하기 🧬

typeof는 제네릭과 함께 사용하면 더욱 유연한 타입 설계가 가능해져. 제네릭을 사용하면 재사용 가능한 컴포넌트를 만들 수 있는데, typeof와 결합하면 그 유연성이 배가 돼!

function createState<t>(initial: T) {
  let value = initial;
  return {
    get: () => value,
    set: (newValue: T) => { value = newValue; }
  };
}

const numberState = createState(42);
type NumberState = typeof numberState;

const stringState = createState("hello");
type StringState = typeof stringState;

// NumberState와 StringState는 각각 다른 타입을 가지게 돼!
numberState.set(10); // OK
stringState.set("world"); // OK

numberState.set("oops"); // 에러!
stringState.set(42); // 에러!</t>

이 예제에서 우리는 제네릭 함수 createState를 만들고, typeof를 사용해 그 반환값의 타입을 추론했어. 이렇게 하면 각 상태 객체가 자신의 타입에 맞는 값만 받아들이도록 할 수 있지. 타입 안전성과 유연성을 동시에 잡은 거야! 👍

typeof와 매핑된 타입: 타입 변환의 마법 🧙‍♂️

typeof는 매핑된 타입과 함께 사용하면 기존 타입을 기반으로 새로운 타입을 만들어낼 수 있어. 이건 정말 강력한 기능이야!

const userConfig = {
  name: "Default User",
  theme: "light",
  fontSize: 16,
  showNotifications: true
};

type UserConfig = typeof userConfig;

type ConfigUpdater = {
  [K in keyof UserConfig as `update${Capitalize<string k>}`]: (value: UserConfig[K]) => void;
};

// ConfigUpdater 타입은 이렇게 될 거야:
// {
//   updateName: (value: string) => void;
//   updateTheme: (value: string) => void;
//   updateFontSize: (value: number) => void;
//   updateShowNotifications: (value: boolean) => void;
// }

const configUpdater: ConfigUpdater = {
  updateName: (value) => { console.log(`Updating name to ${value}`); },
  updateTheme: (value) => { console.log(`Updating theme to ${value}`); },
  updateFontSize: (value) => { console.log(`Updating font size to ${value}`); },
  updateShowNotifications: (value) => { console.log(`Updating notifications to ${value}`); }
};

configUpdater.updateName("New User"); // OK
configUpdater.updateFontSize(18); // OK
configUpdater.updateTheme("dark"); // OK
configUpdater.updateShowNotifications(false); // OK</string>

와우! 😮 이 예제에서 우리는 typeof로 객체의 타입을 가져오고, 매핑된 타입을 사용해 그 타입의 각 속성에 대한 업데이트 함수를 만들었어. 이렇게 하면 설정 객체의 구조가 변경되더라도 업데이트 함수들이 자동으로 맞춰지게 되지. 타입 안전성과 유연성의 완벽한 조화야!

typeof와 타입 추론: 코드 자동완성의 파워 💪

typeof의 또 다른 강점은 IDE의 코드 자동완성 기능과 잘 어울린다는 거야. TypeScript와 현대적인 IDE를 함께 사용하면, typeof로 추론된 타입을 기반으로 아주 강력한 코드 자동완성을 경험할 수 있어.

const complexObject = {
  data: {
    users: [
      { id: 1, name: "Alice", roles: ["admin", "user"] },
      { id: 2, name: "Bob", roles: ["user"] }
    ],
    settings: {
      darkMode: true,
      language: "en"
    }
  },
  methods: {
    addUser: (name: string, roles: string[]) => { /* ... */ },
    changeSettings: (key: string, value: any) => { /* ... */ }
  }
};

type ComplexObjectType = typeof complexObject;

function useComplexObject(obj: ComplexObjectType) {
  // 여기서 obj를 사용할 때 IDE가 완벽한 자동완성을 제공할 거야!
  obj.data.users[0].name; // 자동완성: name 속성 제안
  obj.methods.addUser("Charlie", ["user"]); // 자동완성: 함수 시그니처 제안
  obj.data.settings.darkMode; // 자동완성: darkMode 속성 제안
}

이 예제에서 typeof를 사용해 복잡한 객체의 타입을 추론하고, 그 타입을 함수의 매개변수로 사용했어. 이렇게 하면 IDE가 obj의 모든 속성과 메서드에 대해 정확한 자동완성을 제공할 수 있게 돼. 이건 생산성을 엄청나게 높여주는 기능이야! 🚀

typeof와 타입 가드: 런타임 타입 체크의 강력함 💪

typeof는 타입 가드로도 사용할 수 있어. 타입 가드는 런타임에 타입을 체크하고, 그에 따라 타입을 좁혀주는 기능이야. 이를 통해 더 안전하고 명확한 코드를 작성할 수 있지.

function processValue(value: string | number) {
  if (typeof value === "string") {
    // 여기서 TypeScript는 value가 string 타입임을 알아
    console.log(value.toUpperCase());
  } else {
    // 여기서는 value가 number 타입임을 알아
    console.log(value.toFixed(2));
  }
}

processValue("hello"); // "HELLO"
processValue(3.14159); // "3.14"

이 예제에서 typeof를 사용해 value의 타입을 체크하고, 각 타입에 맞는 연산을 수행했어. TypeScript는 이 체크를 이해하고 각 블록 내에서 적절한 타입 추론을 제공해. 이렇게 하면 타입 안전성을 높이면서도 유연한 코드를 작성할 수 있어!

typeof와 타입 단언: 타입 시스템과의 협력 🤝

때로는 TypeScript의 타입 추론보다 우리가 더 정확히 타입을 알고 있을 때가 있어. 이럴 때 typeof와 타입 단언(as)을 함께 사용하면 아주 유용해.

const myObject = {
  name: "TypeScript",
  version: 4.5,
  isAwesome: true
};

// TypeScript는 기본적으로 이 객체의 속성들을 리터럴 타입으로 추론해
// { name: "TypeScript", version: 4.5, isAwesome: true }

// 하지만 우리는 더 일반적인 타입을 원할 수 있어
type GeneralObject = {
  name: string;
  version: number;
  isAwesome: boolean;
};

const generalObject = myObject as GeneralObject;

// 이제 generalObject의 속성들은 더 일반적인 타입을 가져
generalObject.name = "JavaScript"; // OK
generalObject.version = 2021; // OK
generalObject.isAwesome = false; // OK (하지만 이건 거짓말이야! 😉)

// typeof와 결합해서 사용할 수도 있어
type InferredType = typeof myObject;
const inferredObject = myObject as InferredType;

// inferredObject는 여전히 리터럴 타입을 가져
// inferredObject.name = "JavaScript"; // 에러!
// inferredObject.version = 2021; // 에러!
// inferredObject.isAwesome = false; // 에러!

이 예제에서 우리는 typeof로 추론된 타입과 직접 정의한 타입을 as 키워드를 통해 결합했어. 이렇게 하면 TypeScript의 타입 시스템과 협력하면서도 우리가 원하는 대로 타입을 조정할 수 있어. 이건 특히 라이브러리나 외부 API와 작업할 때 유용하지!

typeof의 고급 사용법: 조건부 타입과의 조합 🧠

이제 typeof를 조건부 타입과 결합해서 더 복잡하고 강력한 타입 로직을 만들어보자. 이건 정말 고급 기술이니까 잘 따라와!