프론트엔드 첫걸음

기획서로 플로우 그리기를 AI에게 맡기기

차정 — Fri, 23 Jan 2026 14:31:00 +0900

1. manus.io/app 에 접속한다

2. 기획서 pdf파일 올리고 분석해서 mmd파일 만들어달라구 한다.

4. 다이어그램 이름 설정 뒤 만들기

5. mmd 파일을 텍스트로 복사

회사 파일이라 모자이크 처리함

6. + 버튼 클릭해서 메르메이드 클릭

7. 메모장에 복사했던 메르메이드 파일 텍스트를 붙여넣고 삽입

8. 이렇게 됨

TypeScript 빌드 에러: Cannot find type definition file for 'minimatch'

차정 — Tue, 26 Aug 2025 11:03:16 +0900

프로젝트를 진행하다가 빌드 중 아래와 같은 에러를 만났습니다.

Failed to compile

Cannot find type definition file for 'minimatch'.
The file is in the program because:
Entry point for implicit type library 'minimatch' TS2688

같은 프로젝트를 쓰는 다른 개발자에게서는 문제가 없었기 때문에, 제 로컬 환경이나 IDE 설정 문제라는 생각이 들었습니다.

원인 분석

이 에러는 TypeScript가 minimatch의 타입 정의(.d.ts)를 찾지 못할 때 발생합니다.
대표적인 원인은 다음과 같습니다:

로컬/글로벌 TypeScript 버전 불일치
IDE가 node_modules/typescript 대신 전역 설치된 TS를 참조하면서 발생.
타입 정의 누락
minimatch는 자체적으로 타입을 제공하지 않고, @types/minimatch 패키지가 필요합니다.
tsconfig.json 설정 문제
"types" 옵션에 불필요하게 minimatch가 들어가 있거나, typeRoots 설정이 꼬여서 발생할 수 있습니다.

해결 방법

VS Code(Cursor)에서 로컬 TypeScript 버전 사용하기Cursor(VS Code)에서는 기본적으로 전역 TS를 참조하는데, 이걸 프로젝트 안에 있는 **로컬 TypeScript(node_modules/typescript)**를 쓰도록 바꿔주면 해결됩니다.

Ctrl+Shift+P (맥은 Cmd+Shift+P) → 명령 팔레트 열기
TypeScript: Select TypeScript Version 입력 후 실행
Use Workspace Version 선택

이렇게 설정을 바꾸고 나니, 빌드 에러가 바로 사라졌습니다.

정리

같은 프로젝트인데 나만 에러가 난다면, IDE가 전역 TS를 참조 중일 가능성이 크다.
Cursor에서 Use Workspace Version을 선택하면 로컬 TS 버전을 사용하게 되어 문제 해결.

설정 방법
에러의 원인은 IDE가 전역(global)에 설치된 TypeScript를 사용하면서 발생한 것이었습니다.

Typescript 분배 규칙

차정 — Mon, 11 Aug 2025 16:43:55 +0900

타입스크립트의 분배 규칙(distributive conditional types)은 조건부 타입(T extends U ? X : Y)을 정의할 때 제네릭 매개변수에 유니언 타입이 들어오면, 그 유니언 타입의 각 멤버에 대해 개별적으로 조건이 적용되는 동작을 말함.

1. 기본 개념

type Example<T> = T extends number ? 'num' : 'other';

T가 제네릭이 아닌 고정된 타입이면 그대로 조건 판별:

type A = Example<number>; // 'num'
type B = Example<string>; // 'other'

T가 유니언 타입이면, 각 멤버별로 조건을 적용한 후 결과를 다시 유니언으로 합침:

type C = Example<number | string>; 
// 처리 과정:
// 1. number → 'num'
// 2. string → 'other'
// 결과: 'num' | 'other'

이게 분배(distribution) 동작입니다.

2. 분배 규칙이 동작하는 조건

제네릭 타입 매개변수가 조건문의 좌변에 그대로 사용되어야 함
T extends U ? X : Y 형태일 때만 자동 분배됨

예:

type Distributed<T> = T extends number ? 'num' : 'other';
type D1 = Distributed<number | string>; // 'num' | 'other'

3. 분배를 막는 방법

T를 한 번 래핑하면 분배가 일어나지 않음:

type NonDistributed<T> = [T] extends [number] ? 'num' : 'other';
type D2 = NonDistributed<number | string>; 
// [number | string] extends [number] → false
// 결과: 'other'

이 방법을 **"분배 방지(disable distribution)"**라고 합니다.

4. 활용 예시

4.1 Exclude 타입

type Exclude<T, U> = T extends U ? never : T;

type E1 = Exclude<'a' | 'b' | 'c', 'a'>;
// 처리 과정:
// 'a' extends 'a' → never
// 'b' extends 'a' → 'b'
// 'c' extends 'a' → 'c'
// 결과: 'b' | 'c'

4.2 Extract 타입

type Extract<T, U> = T extends U ? T : never;

type E2 = Extract<'a' | 'b' | 'c', 'a' | 'b'>;
// 결과: 'a' | 'b'

5. 핵심 정리

유니언 타입이 제네릭에 들어오면, 조건부 타입이 멤버별로 적용된다.
조건문의 좌변에 T가 직접 와야 분배됨.
분배를 막으려면 T를 [T]처럼 튜플 등으로 감싸면 된다.
Exclude, Extract 같은 기본 유틸리티 타입도 이 규칙을 기반으로 동작한다.

[기본문법 배우기] Utility Types

차정 — Mon, 11 Aug 2025 08:25:21 +0900

Partial

Partial<T>: T의 모든 속성을 옵셔널로 변경.

type Partial<T> = { [P in keyof T]?: T[P] };

interface User { id: number; name: string }
const u: Partial<User> = { name: "Kim" }; // id 없어도 OK

Pick

Pick<T, K>: T에서 K 속성만 추출.

type Pick<T, K extends keyof T> = { [P in K]: T[P] };

type UserName = Pick<User, "name">; // { name: string }

Omit, Exclude, Extract 타입 분석

Omit<T, K>: T에서 K 속성을 제거
Exclude<T, U>: T에서 U에 해당하는 타입 제거
Extract<T, U>: T에서 U에 해당하는 타입만 남김

type UserWithoutId = Omit<User, "id">; // { name: string }
type NumbersOnly = Exclude<string | number, string>; // number
type OnlyStrings = Extract<string | number, string>; // string

Required, Record, NonNullable

Required: 모든 속성을 필수로 변경
Record<K, T>: 키 K 집합의 모든 속성이 T 타입
NonNullable: null과 undefined 제거

type RequiredUser = Required<Partial<User>>; // 다시 전부 필수
type StringMap = Record<"a" | "b", string>; // { a: string; b: string }
type WithoutNull = NonNullable<string | null | undefined>; // string

infer

infer는 조건부 타입에서 타입을 추론할 때 사용.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function add(a: number, b: number) { return a + b; }
type AddReturn = ReturnType<typeof add>; // number

완전 복잡한 타입 분석하기 (Promise와 Awaited)

Awaited<T>: Promise 내부의 값 타입 추출.

type Awaited<T> = T extends PromiseLike<infer U> ? Awaited<U> : T;

type R = Awaited<Promise<Promise<number>>>; // number

완전 복잡한 타입 분석하기 (bind)

bind 메서드 타입 정의는 this 타입과 매개변수, 반환 타입을 모두 연결.

function bindExample(this: { name: string }) {
  console.log(this.name);
}
const bound = bindExample.bind({ name: "Kim" }); // this 고정

완전 복잡한 타입 분석하기 (flat )

flat은 다차원 배열을 지정한 깊이만큼 평탄화.

type FlatArray<T> = T extends ReadonlyArray<infer Inner>
  ? Inner extends ReadonlyArray<any> ? FlatArray<Inner> : Inner
  : T;

type R = FlatArray<number[][][]>; // number

[기본 문법 배우기] lib.es5.d.ts 분석

차정 — Mon, 11 Aug 2025 08:01:45 +0900

forEach, map 제네릭 분석

TypeScript의 Array<T>는 제네릭을 활용해 각 메서드의 매개변수 타입을 배열 요소 타입과 연결합니다.

interface Array<T> {
  forEach(callbackfn: (value: T, index: number, array: T[]) => void): void;

  map<U>(callbackfn: (value: T, index: number, array: T[]) => U): U[];
}

T : 배열 요소 타입
U : map 실행 결과 요소 타입 (콜백 반환값 타입)

예시:

[1, 2, 3].forEach((v) => console.log(v)); // v: number
const lengths = ["a", "bb"].map(s => s.length); // lengths: number[]

filter 제네릭 분석

filter는 타입 가드를 활용해 결과 배열의 타입을 좁힐 수 있습니다.

filter(
  predicate: (value: T, index: number, array: T[]) => value is S,
  thisArg?: any
): S[];

value is S → 타입 가드: 필터링 후 S[]로 결과 타입 변경

예시:

const arr = [1, "two", 3, "four"];

const numbers = arr.filter((x): x is number => typeof x === "number");
// numbers: number[]

forEach 타입 직접 만들기

내장 타입 안 쓰고 직접 정의:

type MyForEach = <T>(arr: T[], callback: (value: T, index: number, array: T[]) => void) => void;

const myForEach: MyForEach = (arr, callback) => {
  for (let i = 0; i < arr.length; i++) {
    callback(arr[i], i, arr);
  }
};

map 타입 직접 만들기

type MyMap = <T, U>(arr: T[], callback: (value: T, index: number, array: T[]) => U) => U[];

const myMap: MyMap = (arr, callback) => {
  const result: U[] = []; // Error → 제네릭 위치상 여기선 선언 불가, 함수 안에선 타입 추론 안 됨
  return arr.map(callback);
};

제네릭 <T, U>로 입력과 출력 타입을 연결.

filter 타입 직접 만들기

타입 가드 지원 버전:

type MyFilter = {
  <T>(arr: T[], callback: (value: T, index: number, array: T[]) => boolean): T[];
  <T, S extends T>(arr: T[], callback: (value: T, index: number, array: T[]) => value is S): S[];
};

const myFilter: MyFilter = (arr, callback) => {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (callback(arr[i], i, arr)) result.push(arr[i]);
  }
  return result;
};

공변성과 반공변성

공변성(Covariance): 하위 타입을 상위 타입 자리에 넣는 게 허용됨 (예: 배열 요소)
반공변성(Contravariance): 상위 타입을 하위 타입 자리에 넣는 게 허용됨 (예: 함수 매개변수)

예시:

type Animal = { name: string };
type Dog = { name: string; bark: () => void };

let animals: Animal[] = [];
let dogs: Dog[] = [];

animals = dogs; // 공변성 O
// dogs = animals; // Error

하나에는 걸리겠지 (오버로딩)

하나의 함수에 여러 타입 시그니처를 제공:

function getValue(x: number): string;
function getValue(x: string): number;
function getValue(x: any): any {
  return typeof x === "number" ? x.toString() : x.length;
}

getValue(10);    // string
getValue("hi");  // number

타입스크립트는 건망증이 심하다 (+에러 처리법)

TS는 런타임 값을 타입으로 기억하지 않음 → 변수 값은 변경 가능하므로 타입은 넓어짐.

let v = "hello"; // 타입: string (리터럴 "hello" 아님)

해결:

const 사용
as const로 리터럴 고정
제네릭으로 값 타입을 캡처

예시:

const fixed = "hello"; // 타입: "hello"
const arr = [10, 20] as const; // 타입: readonly [10, 20]

[기본문법 배우기] 옵셔널, 제네릭 기본

차정 — Mon, 11 Aug 2025 07:32:55 +0900

1) 기본: 호출 시점에서 타입이 정해진다

function first<T>(arr: T[]): T {
  return arr[0];
}

const n = first([1, 2, 3]);     // T = number
const s = first(["a", "b"]);    // T = string
const x = first<number>([10, 20]); // 명시적 지정 가능

호출할 때 인자에 맞춰 T가 자동 추론되거나, 직접 지정할 수도 있음.

2) T extends { ... } (객체 형태 제약)

function getId<T extends { id: number }>(value: T): number {
  return value.id;
}

getId({ id: 1, name: "Kim" }); // OK
// getId(123); // Error

최소한 { id: number } 속성이 있는 객체만 받도록 제한.

응용 - 안전한 속성 접근:

function pick<T extends object, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { id: 1, name: "Lee", admin: true };
const nameVal = pick(user, "name");   // string

3) T extends any[] (배열/튜플 제약)

function head<T extends any[]>(arr: T): T[number] {
  return arr[0];
}

head([1, 2, 3]);        // number
head(["x", "y"]);       // string
head([1, "x", true]);   // number | string | boolean

배열 계열만 받도록 제한, 원소 타입을 자동 추출.

튜플 정보 보존:

function tupleHead<T extends readonly unknown[]>(arr: T): T[0] {
  return arr[0];
}

const t = tupleHead([10, "a"] as const); // 타입: 10

길이 제한:

function atLeastTwo<T extends [unknown, unknown, ...unknown[]]>(arr: T) {
  return { first: arr[0], second: arr[1] };
}

atLeastTwo([1, 2]);        // OK
atLeastTwo([1, 2, 3, 4]);  // OK
// atLeastTwo([1]); // Error

4) T extends (...args:any)=>any (함수 제약)

type AnyFn = (...args: any[]) => any;

function once<T extends AnyFn>(fn: T): T {
  let called = false;
  let result: ReturnType<T>;
  return function (...args: Parameters<T>) {
    if (!called) {
      called = true;
      result = fn(...args);
    }
    return result;
  } as T;
}

function add(a: number, b: number) { return a + b; }
const addOnce = once(add);

addOnce(1, 2); // OK
// addOnce("x", "y"); // Error

함수 파라미터 타입과 반환 타입을 그대로 유지.

5) T extends new (...args:any)=>any (생성자 제약)

type AnyCtor = new (...args: any[]) => any;

function make<T extends AnyCtor>(Ctor: T, ...args: ConstructorParameters<T>): InstanceType<T> {
  return new Ctor(...args);
}

class Person {
  constructor(public name: string, public age: number) {}
}

const p = make(Person, "Han", 28); // p: Person

ConstructorParameters<T>로 생성자 매개변수 타입 추출,
InstanceType<T>로 인스턴스 타입 추출.

6) T extends abstract new ... (추상 생성자 제약)

abstract class Repo {
  abstract find(id: string): string;
}

class UserRepo extends Repo {
  find(id: string) { return `user-${id}`; }
}

type AbstractCtor<T = object> = abstract new (...args: any[]) => T;

function useRepo<T extends AbstractCtor<Repo>>(RepoCtor: T) {
  return (instance: InstanceType<T>) => instance.find("1");
}

const run = useRepo(UserRepo);
run(new UserRepo()); // OK
// run(new Repo()); // Error: Repo는 추상 클래스라 인스턴스 불가

abstract new는 “이 타입은 추상 생성자”라는 뜻.
주로 추상 클래스를 파라미터로 받는 팩토리, DI 컨테이너 등에 사용.

[기본문법 배우기] TypeScript 클래스 주요 기능 정리

차정 — Fri, 1 Aug 2025 00:12:46 +0900

1. class는 실제 JavaScript에서도 남아있음

TypeScript의 class 문법은 단순히 타입 검사 전용이 아니라 실제 JavaScript 코드로 변환된 후에도 존재한다.

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

위 코드는 JavaScript로 컴파일되어도 여전히 class로 남는다.
즉, 런타임에서도 Person은 실제 생성자 함수처럼 동작한다.

반면 interface는 타입 검사 전용이므로 JS로 변환되면 사라진다.

2. 추상 클래스 (abstract class)

abstract 키워드로 선언하는 클래스는 직접 인스턴스를 만들 수 없고 반드시 상속을 통해서만 사용할 수 있다.
또한 추상 메서드(abstract method)는 자식 클래스에서 반드시 구현해야 한다.

abstract class Animal {
  abstract makeSound(): void; // 구현 없음, 자식 클래스에서 강제 구현

  move() {
    console.log("Moving...");
  }
}

class Dog extends Animal {
  makeSound() {
    console.log("Bark!");
  }
}

const d = new Dog();
d.makeSound(); // ✅ Bark!
d.move();      // ✅ Moving...
// const a = new Animal(); // ❌ 불가능

공통 로직은 추상 클래스에서 구현 가능
특정 메서드는 반드시 자식 클래스가 구현하도록 강제 가능

3. public 접근 제어자

클래스의 속성과 메서드는 기본적으로 public이다.
즉, public을 명시하지 않아도 어디서든 접근 가능하다.

class Car {
  public brand: string; // 어디서든 접근 가능

  constructor(brand: string) {
    this.brand = brand;
  }
}

const c = new Car("BMW");
console.log(c.brand); // ✅ 가능

4. private

private는 클래스 내부에서만 접근 가능한 속성을 만든다.
즉, 클래스 외부나 상속받은 클래스에서도 접근할 수 없다.

class Person {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  introduce() {
    return `Hi, I'm ${this.name}`;
  }
}

const p = new Person("Lee");
console.log(p.introduce()); // ✅ 가능
// console.log(p.name); // ❌ 오류: private 속성은 외부 접근 불가

private 생성자

생성자에도 private를 붙일 수 있다.
이 경우 외부에서 인스턴스를 만들 수 없으며, 싱글톤 패턴 구현 시 유용하다.

class Singleton {
  private static instance: Singleton;
  private constructor() {}

  static getInstance() {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

const s1 = Singleton.getInstance();
const s2 = Singleton.getInstance();
console.log(s1 === s2); // ✅ true

private vs 자바스크립트의 #

TypeScript의 private는 컴파일 타임에서만 제한된다.
런타임에서는 단순한 속성으로 존재한다.

class Person {
  private age = 20;
}
const p = new Person();
// JS 실행 시 p.age 접근 가능 (TS에서만 막힘)

실제 런타임에서도 완벽히 막고 싶다면 **ES2022의 #필드**를 사용해야 한다.

class Person {
  #age = 20; // JS의 진짜 private 필드
}

5. 접근 제어자 비교

접근 제어자 클래스 내부 상속 클래스 클래스 외부

public	✅ 가능	✅ 가능	✅ 가능
protected	✅ 가능	✅ 가능	❌ 불가능
private	✅ 가능	❌ 불가능	❌ 불가능

최종 정리

class : JS에도 남아있어 실제 런타임 동작 가능
abstract class : 직접 인스턴스 불가, 자식 클래스가 구현 강제
public : 기본 접근 제어자, 어디서든 접근 가능
private : 클래스 내부에서만 접근 가능, TS 컴파일 시에만 제한 (런타임 보장은 아님)

[기본문법 배우기] 클래스는 "값" + "타입" 두 가지 역할을 한다

차정 — Fri, 1 Aug 2025 00:09:07 +0900

1. 클래스는 "값" + "타입" 두 가지 역할을 한다

타입스크립트에서 class는 런타임에는 값(value)으로 존재하면서,
동시에 타입 공간(type space)에서도 이름을 가진다.

class A {
  a: string;
  b: number;

  constructor(a: string, b: number = 123) {
    this.a = a;
    this.b = b;
  }

  method() {}
}

2. type AA = A

여기서 A는 **클래스 A의 인스턴스 타입(instance type)**을 의미한다.

type AA = A;

즉, AA는 new A(...) 해서 만들어지는 객체가 어떤 모양을 가지는지 나타내는 타입이다.

3. const a: A = new A('123')

여기서도 A는 인스턴스 타입이다.
new A('123')의 결과(인스턴스)가 바로 타입 A에 해당한다.

const a: A = new A('123'); // ✅ 가능

즉, a는 A 클래스의 인스턴스이다.

4. const b: typeof A = A

여기서는 클래스 자체(생성자 함수 그 자체)의 타입을 말하는 것이다.

A → 인스턴스 타입
typeof A → 클래스(생성자)의 타입

const b: typeof A = A;

여기서 typeof A는 “A라는 클래스 자체의 타입(생성자 함수)”을 의미한다.
즉, 다음과 같은 형태로 전개된다:

typeof A === { new(a: string, b?: number): A }

new(...) : 생성자 호출 시그니처
A : 생성자로부터 만들어지는 인스턴스의 타입

5. 정리

A
인스턴스 타입 (new A()로 만든 객체의 타입)
typeof A
클래스 자체(생성자)의 타입

[기본문법 배우기] readonly, 인덱스드 시그니처, 맵드 타입스

차정 — Thu, 31 Jul 2025 23:57:50 +0900

1. readonly

Readonly<T>는 타입의 모든 프로퍼티를 읽기 전용으로 만든다.
즉, 값을 수정할 수 없게 한다.

interface User {
  id: number;
  name: string;
}

const u: Readonly<User> = {
  id: 1,
  name: "Kim"
};

u.id = 2;   // ❌ 오류 발생 (읽기 전용)
u.name = "Lee"; // ❌ 오류 발생

Readonly<T>는 타입 레벨에서만 적용된다.
실제 JS 런타임에서는 값이 변하는 것을 막지 못한다. (Object.freeze 같은 것은 따로 사용해야 한다)

2. 인덱스드 시그니처 (Indexed Signatures)

인덱스드 시그니처는 **동적 키(key)**를 가지는 객체 타입을 정의할 때 사용한다.

interface StringMap {
  [key: string]: string;
}

const colors: StringMap = {
  red: "#ff0000",
  blue: "#0000ff",
};

colors["green"] = "#00ff00"; // ✅ 가능
colors[123] = "#123456";     // ✅ number도 string으로 변환됨

[key: string]: T : 모든 키가 string일 때 T 값을 갖는다.
[key: number]: T : 모든 키가 number일 때 T 값을 갖는다.
일반적으로 number 인덱스는 자동으로 string으로 변환되어 처리된다.

3. 맵드 타입 (Mapped Types)

맵드 타입은 기존 타입을 기반으로 새로운 타입을 만드는 문법이다.
in 키워드를 사용하여 타입의 키들을 순회한다.

기본 예시

type B = 'Human' | 'Mammal' | 'Animal';

// 유니온 타입 B의 모든 요소를 key로, 값은 number로
type A = { [key in B]: number };

const aaaa: A = { 
  Human: 123, 
  Mammal: 6, 
  Animal: 7 
}; // 정상 동작

interface User {
  id: number;
  name: string;
  age: number;
}

// 모든 프로퍼티를 선택적으로 만든다
type PartialUser = {
  [K in keyof User]?: User[K];
};

// 모든 프로퍼티를 읽기 전용으로 만든다
type ReadonlyUser = {
  [K in keyof User]: Readonly<User[K]>;
};

활용 예시: 유틸리티 타입 구현

타입스크립트의 기본 제공 유틸리티 타입들도 맵드 타입으로 구현된다.

// Partial<T> : 모든 프로퍼티를 선택적으로
type MyPartial<T> = {
  [K in keyof T]?: T[K];
};

// Required<T> : 모든 프로퍼티를 필수로
type MyRequired<T> = {
  [K in keyof T]-?: T[K];
};

// Readonly<T> : 모든 프로퍼티를 읽기 전용으로
type MyReadonly<T> = {
  [K in keyof T]: Readonly<T[K]>;
};

정리

Readonly : 객체 속성을 수정 불가능하게 만든다.
인덱스드 시그니처 : 동적 키를 가진 객체 타입을 정의할 수 있다.
맵드 타입 : 기존 타입을 기반으로 새로운 타입을 정의할 수 있으며, Partial, Readonly, Required 같은 유틸리티 타입들이 이 개념으로 만들어진다.

[기본문법 배우기] {}와 Object (ts 4.8)

차정 — Thu, 31 Jul 2025 23:21:40 +0900

이전에는 object와 Object가 혼용되어 혼란이 있었다.
4.8 이후 object는 보다 좁은 타입으로, "객체만" 을 표현한다.
반면 Object는 훨씬 넓은 타입으로, 원시값까지 포함하여 null과 undefined만 제외한다.

TypeScript 4.8에서의 object 타입

1. object 타입의 의미

object 타입은 원시 타입(primitive) 을 제외한 모든 값을 의미한다.
원시 타입에는 string, number, boolean, symbol, bigint, null, undefined 가 포함된다.
따라서 object 타입에는 {}, 배열, 함수, new Date() 같은 값이 할당될 수 있다.

let a: object;

a = { x: 1 };   // 가능하다.
a = [1, 2, 3];  // 가능하다.
a = () => {};   // 가능하다.

a = 10;         // 불가능하다.
a = "hi";       // 불가능하다.
a = null;       // 불가능하다.

2. object와 Object의 차이

TypeScript 4.8에서는 두 타입이 더욱 명확히 구분되었다.

object: 원시 타입을 제외한 객체 값만 허용한다.
Object: null과 undefined를 제외한 모든 값을 허용한다.

let x: object;
x = {};        // 가능하다.
x = [];        // 가능하다.
x = 123;       // 불가능하다.

let y: Object;
y = {};        // 가능하다.
y = [];        // 가능하다.
y = 123;       // 가능하다.
y = "hi";      // 가능하다.
y = null;      // 불가능하다.

TypeScript 4.8 에서의 변화 - unknown 타입을 좁히는 방식

4.8 이전의 동작

function f(x: unknown) {
  if (x) {
    // 여기서 x는 여전히 unknown이다.
  }
}

if (x) 로 truthy 체크를 해도 타입은 여전히 unknown으로 남았다.
즉, 타입스크립트는 좁히기를 하지 않았다.

4.8 이후의 동작

function f(x: unknown) {
  if (x) {
    // 여기서 x는 {} 타입이다.
  }
}

이제 if (x)라고 하면 null과 undefined는 자동으로 제외된다.
타입스크립트는 "적어도 객체든, 원시값이든 무언가 값은 있다"라고 추론한다.
따라서 이 시점의 타입은 unknown → {} 로 좁혀진다.

{} 와 Object의 차이

1. {} 타입

의미: null과 undefined를 제외한 모든 값을 의미한다.
즉, 원시값(number, string, boolean, symbol, bigint) + 객체(object, array, function) 모두 허용된다.

let a: {};
a = 123;        // 가능하다.
a = "hi";       // 가능하다.
a = {};         // 가능하다.
a = [];         // 가능하다.
a = () => {};   // 가능하다.
a = null;       // 불가능하다.
a = undefined;  // 불가능하다.

즉 {}는 "값이 무언가 있다" 정도만 보장하는 타입이다.

2. Object 타입

의미: 자바스크립트의 Object 타입 래퍼와 유사하게 동작한다.
{} 와 거의 비슷하지만, 내부적으로 타입 체커가 toString, valueOf 같은 Object.prototype의 메서드를 사용할 수 있다고 본다.

타입	허용되는 값	특징
{}	null과 undefined 제외한 모든 값	단순히 값이 존재함만 보장
Object	null과 undefined 제외한 모든 값	Object.prototype 메서드 사용 가능