Type Script 제너릭타입(Generic types)

Type Script 제너릭타입(Generic types)

---

📌 제너릭이란?

선언 시점이 아닌 생성 시점에 타입을 명시하여

하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법

 

전달받은 타입을 확인 및 반환을 할 수 있고 타입을 제한 할 수도 있습니다.

---

📌 배열 선언

 

---

📌 제너릭을 굳이 사용하는 이유는?

 

제네릭을 선언할 때 관용적으로 사용되는 대표적인 식별자로 T가 있고, 그 외에 U와 V가 있습니다. 반드시 T, U, V를 사용하여 하는 것은 아니지만 관용적인 식별자를 쓰는게 모범적입니다.

 

📄 index.ts

interface MyInterface {
  value: string | number | string[];
}

const stringObject: MyInterface = { value: "hello world!" };
const numberObject: MyInterface = { value: 1234 };
const stringArrayObject: MyInterface = { value: ["hello", "world!"] };

// --- 유연한 타입

interface MyInterfaceG<T> {
  value: T;
}

const stringObjectG: MyInterfaceG<string> = { value: "hello world!" };
const numberObjectG: MyInterfaceG<number> = { value: 1234 };
const stringArrayObjectG: MyInterfaceG<string[]> = {
  value: ["hello", "world!"],
};

타입의 프로퍼티를 보다 유연하게 타입을 입힐 수 있어 사용한다.

 

📄 기초값 지정

interface MyInterfaceG<T = string> {
  value: T;
}

const stringObjectG: MyInterfaceG = { value: "hello world!" };
const numberObjectG: MyInterfaceG = { value: 1234 }; // error
const stringArrayObjectG: MyInterfaceG<string[]> = {
  value: ["hello", "world!"],
};

---

📄 함수 - 기본 구조

type User = {
    email: string;
    name: string;
};

function getData<T>(data: T):T {
    return data;
}

console.log(getData<string>("string data"));
console.log(getData<number>(1234));
console.log(getData<User>({ email: "email@email.com", name: "katie" }));
console.log(getData<string[]>(["string", "data"]));
console.log(getData<string[]>([]));

 

 

📄 함수 - values

enum Status {
    Initiated = "Initiated",
    Pending = "Pending",
    Shipped = "Shipped",
    Delivered = "Delivered",
}

interface Order {
    buyer: string;
    orderStatus: Status;
}

const orders: Order[] = Object.values(Status).map((status, index) => {
    return {
        buyer: `buyer #${index}`,
        orderStatus: status,
    };
});

 

---

📄 class

// public, private, protected

// public => 제한 없음, 누구나 access 가능
// private => 특정 class 안에서만 access 가능
// protected => 특정 class 안에서 access 가능, 상속받는 class 안에서 access 가능

class Base {
    first = "";
    public second = "";
    protected third = "";
    private fourth = "";

    baseFunction() {
        this.fourth;
    }
}

class Inherited extends Base {
    myFunction() {
        this.first;
        this.second;
        this.third;
        // this.fouth; // 에러
    }
}

const inherited = new Inherited();

inherited.first;
inherited.second;
// inherited.third; // 에러
// inherited.fourth; // 에러

 

📄 stack class

interface IStack<T> {
    push(item: T): void;
    pop(): T | undefined;
    peek(): T | undefined;
    size(): number;
}

class Stack<T> implements IStack<T> {
    private storage: T[] =[];

    constructor(private capacity = 4) {}

    push(item: T): void {
        if (this.size() === this.capacity) {
            throw Error("stack is full!");
        }

        this.storage.push(item);
    }

    pop(): T | undefined {
        return this.storage.pop(); // Array<T>.pop();
    }

    peek(): T | undefined {
        return this.storage[this.size() - 1];
    }

    size(): number {
        return this.storage.length;
    }
}

const stringStack = new Stack<string>();
stringStack.push("hello");
stringStack.push("world");
stringStack.push("!");
stringStack.push("!");
// stringStack.push("!"); // Error: stack is full!
console.log(stringStack.peek());