1. 사용법

interface IGene {
    data : string | number;
}

function prt(params : any){
    console.log(params.data);
}

params값이 유동적으로 변하기 때문에
제너릭을 사용하는게 용이

interface IGene<T> {
    //data : string | number;
    data : T
}

function prt(params : IGene<string>){
    console.log(params.data);
}

function prt(params : IGene<number>){
    console.log(params.data);
}

2. 심화

interface IGene<T, U> {
    //data : string | number;
    data : Array<T>;
    name : U;
}

function prt(params : IGene<number, string>){
    console.log(params.data);
}

prt({data : [123, 456, 789] , name : 'js'})

3. extends

1) 제한 안정성

function prt<T extends string | number, U extends boolean | object>(params : T, params2 : U){
    if(typeof params === "string") console.log("문자열입니다.")
    else if (typeof params === "number") console.log("숫자입니다.")

    if(typeof params2 === "boolean") console.log("불리언입니다.")
    else if (typeof params2 === "object") console.log("객체입니다.")
}

prt<string, boolean>("하하하", true);
prt<number, object>(123, {})

안전하게 타입을 지정해줄 수 있음 (타입제한)

2) 보장성

interface IHi{
    hi : (name : string) => void
}

function execute<T extends IHi>(params : T){
    params.hi("js");
}

execute({ hi(name : string){console.log("HI!!", name)}});

안의 내용(함수, 변수)을 보장함

4. 예제

1)

interface IData<T>{
    data1 : string | number;
  	data2 : string | number;
  	data3 : string | number;
}

interface IData<T extends string | number>{
    data1 : T
  	data2 : T
  	data3 : T
}

data 이외의 값 추가 용이
하나 하나 변경하지 않고 extends 만 변경하면 됨

2)

function returnParams<T>(params : T) : T{
    return params;
}

returnParams<string>("hi");
returnParams<number>(10);
returnParams<boolean>(true);

할당되는 값의 타입을 지정할 수 있음

3)

const rP : <T>(params : T) => T = returnParams
interface IExecute {
    rP : <T>(params : T) => T
}

타입을 변수와 인터페이스 내에서도 정해줄 수 있다.

4)

function prtKey<T extends object, U extends keyof T>(params : T, key : U) : T[U] {
    console.log(params[key]);
    return params[key];
}

prtKey<IOb1, keyof IOb1>({name : "js", age : 10}, "name");
prtKey<IOb2, keyof IOb2>({city : "seoul", phone : "01011111111" }, "name"); //에러

키오프를 통해서 key 정보도 지정해줄 수 있음

5)

class ClassName<T> {
    constructor(private _data : T){

    }

    set data(newData : T) {
        this._data = newData;
    }

    get data() : T {
        return this._data;
    }
}

클래스 get set 활용가능