7장 제네릭 타입

7.1 기본 타입 정의

7.1.1 제네릭이란?

1) 제네릭을 사용하는 이유

function returnNumber(x: number): number {
	return x;
}

console.log(returnNumber(1)); // 1
console.log(returnNumber('1')); // Error

function returnString(x: string): string {
	return x;
}

console.log(returnString('2')); // '2'
console.log(returnString(2)); // Error

function returnParam<T>(x: T): T {
	return x;
} 

console.log(returnParam<number>(2));
console.log(returnParam<string>('2'));

function returnParam<T>(x: T): T {
	return x;
} 

console.log(returnParam(2));
console.log(returnParam('2'));

2) 제네릭 사용법

function pair<T, U>(x: T, y: U): [T, U] {
	return [x, y];
}

console.log(pair<number, string>(1, 'a')); // [1, a]

7.2 콜백 함수에서의 제네릭

7.2.1 타입스크립트의 콜백 함수

1) 콜백 함수 타입 정의

type Callback = (data: string) => void;

2) 콜백 함수 사용 예제

// 콜백 함수 타입 정의
type Callback = (result: string) => void;

// 콜백 함수 정의
const funcCallback = (callback: Callback) => {
	const result = "callback";
	callback(result);
};

// 콜백 함수 사용
funcCallback((data) => {
	console.log("콜백 함수 사용 중", data); // 콜백 함수 사용 중 callback
});

7.2.2 콜백 함수에 제네릭 적용

1) 제네릭 타입 정의

type Callback<T> = (result: T) => void;

2) 제네릭 적용

// 제네릭을 적용한 콜백 함수 타입 정의
type GenericCallback<T> = (result: T) => void;

// 제네릭을 적용한 콜백 함수 정의
const funcGenericCallback = <T>(callback: GenericCallback<T>, data: T) => {
  callback(data);
};

// 제네릭 콜백 함수 호출
funcGenericCallback<string>((data) => {
  console.log("콜백 함수 사용", data);
}, "제네릭 사용 중");

7.2.3 다양한 타입의 제네릭 콜백 함수

// 제네릭 콜백 함수 타입 정의
type MultiTypeCallback<T, U> = (param1: T, param2: U) => void;

// 제네릭 콜백 함수 정의
const funcMultiCallback = <T, U><callback: MultiTypeCallback<T, U>(
param1: T, param2: U
) => {
	callback(param1, param2);
};

1) <string, number> 사용 예제

funcMultiCallback<string, number>((fruits, count) => {
  console.log("fruits: ", fruits);
  console.log("count: ", count); 
}, "apple", 30)

// fruits: apple
// count: 30

2) <number[], function> 사용 예제

funcMultiCallback<number[], (value: number) => void>((result, func) => {
  result.forEach((num) => func(num * 2));
}, [1, 2, 3], (value) => console.log("Double: ", value));

// Double: 2
// Double: 4
// Double: 6

7.2.4 제네릭 콜백 함수를 통한 API 호출

// 타입 정의
type Success<T> = (data: T) => void;
type Error = (error: string) => void;

function fetchData<T>(url: string, successCallback: Success<T>, errorCallback: Error) {
  const res = { success: true, data: "API Data" };

  if (res.success) {
    successCallback(res.data);
  } else {
    errorCallback("API 에러");
  }
}

// 사용 예제
fetchData<string>(
  "/api/data",
  (result) => {
    console.log("API 호출 성공:", result);
  },
  (error) => {
    console.error("API 호출 실패:", error);
  }
);

7.3 인터페이스와 타입 별칭에서의 제네릭

7.3.1 제네릭 인터페이스

1) 제네릭 인터페이스

interface Person<K, V> {
	name: K;
	age: V;
}

const person: Person<string, number> = {
	name: "John",
	age: 28,
};

2) 제네릭 인터페이스와 인덱스 시그니처

interface Person<K, V> {
	name: K;
	age: V;
	[key: string]: K | V;
}

const person: Person<string, number> = {
	name: "John",
	age: 28,
	address: "Main Street 1",
	gender: "male",
};

3) 제네릭 인터페이스 확장

interface Person<T> {
	name: T;
	age: number;
}

interface Developer extends Person<string> {
	job: string;
}

const myinfo: Developer = {
	name: "John",
	age: 28,
	job: "Frontend Developer",
};

7.3.2 제네릭 타입 별칭

1) 제네릭 타입 별칭

type Person<K, V> = {
	name: K;
	age: V;
}

const person: Person<string, number> = {
	name: "Emily",
	age: 22,
};

2) 제네릭 타입 별칭과 인덱스 시그니처

type Person<K, V> = {
	name: K;
	age: V;
	[key: string]: K | V;
}

const person: Person<string, number> = {
	name: "Emily",
	age: 22,
	address: "Main Street 2",
	gender: "female",
};

7.3.3 제네릭 인터페이스 활용

interface Seller {
	type: "seller";
	salesList: string[];
}

interface Consumer {
	type: "consumer";
	orderList: string[];
}

interface User<T> {
	name: string;
	profile: T;
}

function selesProduct(user: User<Seller>) {
	console.log(user.profile.salesList);
}

let seller: User<Seller> = {
  name: "John",
	profile: {
		type: "seller",
		salesList: ["Laptop", "Cell Phone"],
	},
};

let consumer: User<Consumer> = {
  name: "Emily",
	profile: {
		type: "consumer",
		orderList: ["Laptop"],
	},
};

selesProduct(consumer); // Error
selesProduct(seller); // ["Laptop", "Cell Phone"]

7.4 클래스에서의 제네릭

7.4.1 원시 타입 변수

class Person<T, K> {
    private _name: T;
    private _age: K;

    constructor(name: T, age: K) {
        this._name = name;
        this._age = age;
    }
}

new Person('Jake', 12); // 인자를 통해 타입 추론
new Person<string, number>('Jake', 12); // 명시한 타입과 인자 타입 일치
new Person<string, number>(12, 'Jake'); // Error: 명시한 타입과 인자 타입 불일치

7.4.2 참조 타입 변수

class Stack<T> {
    private _items: T[] = [];

    push(item: T): void {
        this._items.push(item);
    }

    pop(): T | undefined {
        return this._items.pop();
    }
}

const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
console.log(numberStack.pop()); // 2

const stringStack = new Stack<string>();
stringStack.push("hello");
stringStack.push("world");
console.log(stringStack.pop()); // "world"

7.4.3 제네릭 클래스의 extends

class Pocket<T extends number | string> {
    private _item: T;

    constructor(item: T) {
        this._item = item;
    }

    getItem(): T {
        return this._item;
    }
}

const pocket1 = new Pocket<number>(10); // OK
const pocket2 = new Pocket<string>("hello"); // OK
const pocket3 = new Pocket<boolean>(true); // Error: 'boolean' 형식의 인수는 'number | string' 형식의 매개 변수에 할당될 수 없습니다.

7.5 프로미스에서의 제네릭

7.5.1 프로미스

• 대기 - new Promise (executor): PromiseState ("pending"), PromiseResult(undefined)

• 이행 - resolve(value) 호출: PromiseState ("fulfiiled"), PromiseResult (value)

• 거부 - reject(error) 호출: PromiseState("reject"), PromiseResult (error)

7.5.2 프로미스의 타입

• resolve 함수 - (parameter) resolve: (value: unknown) => void

• reject 함수 - (parameter) reject: (reason?: any) => void

7.5.3 프로미스 타입의 추론

const emptyPromise = new Promise(() => {}); // Promise<unknown>
const basicPromise = new Promise((resolve) => resolve(200)); // Promise<unknown>

const resolvedPromise = Promise.resolve(); // Promise<void>
const resolvedNumberPromiseResolve = Promise.resolve(100); // Promise<number>
const rejectedPromise = Promise.reject('Error'); // Promise<never>

7.5.4 프로미스 객체의 타입 정의

// 타입 정의 방법 (1)
const numPromise = new Promise<number>(() => {}); // Promise<number>
// 타입 정의 방법 (2)
const stringPromise:Promise<string> = new Promise(() => {}); // Promise<string>

const simplePromise = new Promise<number>((resolve, reject) => { // promise<number>
    resolve(200); // (parameter) resolve: (value: number | PromiseLike<number>) => void
    reject('Error 404'); // (parameter) reject: (resean?: any) => void
});

simplePromise.then((result) => console.log(result)); // 200

let typedPromise = new Promise<number | string>((resolve, reject) => {
    setTimeout(() => resolve(100), 1000);
    reject("Error occurred!!");
});

typedPromise.then(
    (result) => { // string | number type
        if (typeof result === "number") {
            console.log(result); // resolve 함수 동작은 무시됩니다.
        }
    }
    ,(error) => { // any type
        if (typeof error === "string") { // Type Narrowing
            console.log(error); // Error
        }
    }
);

typedPromise.catch((error) => { // Error : any type
    if (typeof error === "string") { // Type Narrowing
        console.log(error); // Error
    }
});

7.5.5 프로미스 객체를 반환하는 함수의 타입 정의

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

function fetchInfo() {
    return new Promise<Info>((resolve, reject) => {
        setTimeout(() => {
            resolve({
                name: "Kim",
                age: 32,
            });
        }, 1000);
    });
}

fetchInfo().then((response) => {
    // The type of response is Info
    console.log(response); // { "name": "Kim", "age" : 32}
});

function fetchInfo(): Promise<Info> {
    return new Promise((resolve, reject) => { // Info type
        ...
    });
}

7.6 제약 조건 (Constraints)

7.6.1 제네릭의 제약 조건

interface NewType<T> {
    id: number;
    contents: T;
}

const sample1: NewType<string> = {
    id: 1,
    contents: 'TypeScript',
};

const sample2: NewType<number> = {
    id: 2,
    contents: 100,
};

const sample3: NewType<boolean> = {
    id: 3,
    contents: false,
};

const sample4: NewType<boolean[]> = {
    id: 4,
    contents: [true, false, true],
};

console.log(sample1, sample2, sample3, sample4);

interface NewType<T extends string | number> {
    id: number;
    contents: T;
}

const sample1: NewType<string> = {
    id: 1,
    contents: 'TypeScript',
};

const sample2: NewType<number> = {
    id: 2,
    contents: 100,
};

const sample3: NewType<boolean> = { // Error! type 'booean'
    id: 3,
    contents: false,
};

const sample4: NewType<boolean[]> = { // Error! type 'boolean[]'
    id: 4,
    contents: [true, false, true],
};

7.6.2 제약 조건의 다른 예제

1) 타입 별칭과 함께 사용한 제네릭의 제약 조건

type U = string | number | boolean;

// Constraints
type MyType<T extends U> = undefined | T;

const word: MyType<string> = "TypeScript";
console.log(word); // "TypeScript"

2) 확장된 인터페이스와 함께 사용한 제네릭의 제약 조건

type U = string | number | boolean;

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

// Constraints
interface Dog<T extends U> extends Animal {
    breed: T;
}

const myDog: Dog<string> = {
    name: "Luna",
    age: 1,
    breed: "Maltese",
};
console.log(myDog);