[카테고리:] 미분류

작성일자

TypeScript, 유니온 타입에서 타입 융합을 방지하는 방법

타입 융합이란, 예를들어 'red' | string 과 같은 타입의 경우 'red'는 string에 포함되는 타입이므로 결국 string 하나로 융합되는 것을 의미합니다. 이런 융합을 막기 위한 방법은 string 대신 string & {}을 사용하는 것입니다. 관련된 예제 코드는 다음과 같습니다.

// string & {} 를 교차(Intersection)시키면 타입 융합(Type Flattening)을 방지합니다.
type Color = 'red' | 'blue' | 'green' | (string & {});

function setColor(color: Color) {
  console.log(`Setting color to ${color}`);
}

setColor("red")
// 💡 효과:
// 1. setColor('') 입력 시 'red', 'blue', 'green' 팝업 자동완성이 뜹니다.
// 2. setColor('#123456') 처럼 임의의 문자열을 넣어도 타입 에러가 발생하지 않습니다.
작성일자

TypeScript, 메타 프로그래밍 …

TypeScript는 코드에 대한 코드 작성을 목적으로 하는 메타 프로그래밍 언어입니다. 현존하는 대다수의 거의 대부분의 프로그래밍 언어가 메타 프로그래밍이 가능하지만, 특히 TypeScript는 코드에서 타입을 자동으로 새롭게 재정의가 가능하다는 점에서 다른 프로그래밍 언어보다 조금은 더 메타 프로그래밍 언어적이라고 할 수 있습니다.

타입스크립트에서 메타 프로그래밍을 위해 제공하는 기능은 Generic, keyof, typeof, Conditional Types, Mapped Types, Template Literal Types 등이 있고 서브셋은 JavaScript의 메타 프로그래밍 기능인 Proxy, Reflect, Decorator(제안), Object.defineProperty() 등입니다. 타입스크립트에 한정하여 볼때 아래는 메타 프로그래밍을 위해 제공하는 아래의 예제 코드입니다.

// Generic
type Box<T> = { value: T };

// keyof
type Keys = keyof T;

// typeof
type T = typeof value;

// Indexed Access Type
type Value = T[K];

// Mapped Type
type Readonly<T> = {
    readonly [K in keyof T]: T[K];
};

// Conditional Type
type Result<T> = T extends string ? number : boolean;

// Template Literal Type
type Event<T extends string> = `${T}Changed`;

// infer
type Return<T> = T extends (...args: any[]) => infer R ? R : never;
작성일자

TypeScript, 클래스와 생성자 시그니쳐(Constructor Signature)

다음과 같은 클래스가 있습니다.

class Person {
    constructor(name: string) {}
}

위 클래스의 생성자를 눈 여겨 보기 바랍니다. 클래스의 생성자는 new 연산자와 함께 클래스를 함수처럼 호출하면 실행되는 함수입니다. 이렇게 생성되는 생성자의 일반적인 시그니쳐는 다음과 같습니다.

new (...args) => ReturnType

앞서 봤던 Person 클래스에 대한 생성자 시그니쳐는 다음과 같습니다.

new (name: string) => Person

사실 Person 클래스의 생성자 시그니처는 간단히 다음처럼 얻을 수 있습니다.

type T = typeof Person;

즉, T는 다음과 같게 됩니다.

type T = new(name: string) => Person;
작성일자

TypeScript, 제네릭에서 클래스 타입 사용 (Using Class Types in Generics)

제네릭의 타입 어노테이션에 클래스 타입을 받기 위해서는 클래스의 생성자 함수 타입을 타입 어노테이션으로 받으면 됩니다. 즉, 다음처럼요.

function create<Type>(c: { new (): Type }): Type {
  return new c();
}

위의 함수는 클래스 타입을 제네릭 타입으로 받아 해당 클래스의 객체를 생성해줍니다. 예제 코드는 다음과 같습니다.

class Animal {
  constructor(name: string) { 
    // ...
  }
}
 
function createInstance<A>(c: new (name: string) => A, name: string): A {
  return new c(name);
}
 
createInstance(Animal, "tiger");

Animal의 생성자가 string 타입의 인자를 받는다는 점에 고려하여 클래스의 생성자 함수 타입을 정의하고 있고 있습니다.

작성일자

TypeScript(또는 JavaScript)에서의 깊은 복사

GoF의 Prototype 패턴으로 예시 코드를 들어보면 다음과 같습니다.

class User {
    constructor(
        public name: string,
        public hobbies: string[],
        public settings: Map<string, any>
    ) {}

    clone(): User {
        const copy = Object.create(
            Object.getPrototypeOf(this)
        );

        Object.assign(
            copy,
            structuredClone(this)
        );

        return copy;
    }
}

clone 매서드에 깊은 복사에 대한 코드가 언급되고 있습니다. 9번 라인의 코드가 매서드에 대한 복사, 13번 라이의 코드가 속성에 대한 깊은 복사입니다. 매서드를 가진 객체의 복사에서는 이 두가지에 대한 복사가 반드시 필요합니다.