타입스크립트 올인원(제네릭 분석)

다양한 메서드 제네릭 분석

class Third<T> {
    
}
//선언할때, 뒤에 generic을 붙여준다!

먼저, typescript에서 class 등에서, 이렇게 뒤에 generic을 붙이면서 사용할 수 있는 건 이전 시간부터 배워왔던 내용!

interface Array1<T> {
    forEach(callbakfn: (value:T,index:number,array:T[])=>void,thisArg?: any):void;
}
//선언할때, 뒤에 generic을 붙여준다!
const aaa:Array1<number>=[1,2,3];

[1,2,3].forEach(item => {
    console.log(item);
    
});
// 1,2,3 item은 number로 잘 추론

['1','2','3'].forEach(item => {
    console.log(item);
    
});
// string으로 추론한다

['123',123,true].forEach(item => {
    console.log(item);
    
});
// 여기선 number or boolean


aaa.forEach((value)=>{console.log(value)});

Array1은, TS의 forEach문의 작동원리를 설명한 코드인데, 저런식으로 generic을 이용하면, 어떤 타입이 오든 유연하게 코드를 실행할 수 있다는 장점이 있다.

function add1<T>(x:T,y:T){
    
}

add1(1,'2') // 안됨, generic으로 타입이 같을때만 실행되게 했기 때문!
add1('1','2') // 됨

generic을 이용해서, 오류가 발생해야 하는 코드에서도, 정상적으로 오류를 발생시키게 된다. 참고로 generic은 JS에서는 사라진다.

add1<number>(1,2); // type parameter를 이용해서도 가능하다

이런식으로, Type parameter를 이용해서 generic의 타입을 지정해주는 것도 가능하다.

interface Array1<T> {
    forEach(callbakfn: (value:T,index:number,array:T[])=>void,thisArg?: any):void;
    map<U>(callbackfn:(value:T,index:number,array:T[])=>U,thisArg?:any):U[];
}
//선언할때, 뒤에 generic을 붙여준다!
const aaa:Array1<number>=[1,2,3];

const strings=[1,2,3].map((item=>item.toString));

//item 을 number로 잘받게된다!

위 코드는 , ts 에서의 Map 처리 방식이다. ts는 성공적으로 1,2,3을 number로 추론하게 되었고, 저기서 generic T는 number가 되게된다. 따라서, 전부다 number로 T가 바뀌게 된다. 콜백함수의 리턴값이 U인데, 근데 리턴값은 item.toString()이기에, U는 여기서 string이 되게 된다. 이런식으로, ts는 타입을 추론하게 된다.

const strings2=[1,2,3].map((item=>item+1));

이경우 string2는 number로 성공적으로 타입추론을 하게 된다.

filter의 경우에는 타입 추론을 잘 못해주는 경우도 있다.

const filterd=[1,2,3,4,5].filter((value)=>value%2);

여기선 filtered, value 모두 number가 된다!

const filterd=[1,2,'3',4,5].filter((value)=>typeof value==='string');

단, 여기선 추론을 잘못하게 된다. filtered가 number,string이 된다. 역시 타입스크립트에서는 추론이 가장 큰 영향을 차지한다. 이러한 경우에는, 우리가 개발을 할때 특별한 조치가 따로 필요하다.

이는, concat 이런것과 같이 기존의 함수들도 똑같다. 궁금하다면 그 함수의 내부를 F12 눌러서 파헤쳐 보는 습관같은게 중요하다!

타입 직접 만들기

interface Arr{
    forEach(callback: (item:number)=>void):void;
}


const a4: Arr=[1,2,3];

[1,2,3].forEach((item)=>{
    console.log(item);
})

a4.forEach((item)=>{
    console.log(item);
    return '3';
})

이런식으로, forEach 타입을 직접 만들어볼 수 있는데, 이 경우에는 item에 number가 타입 선언이 되는 코드이다. 하지만, 이 경우에는 다른 타입이 들어올 경우 오류가 나게 된다.(따라서, charAt같은 메서드 사용불가)

interface Arr<T>{
    forEach(callback: (item:T)=>void):void;
}


const a4: Arr<number>=[1,2,3];

하지만, 이렇게 generic을 이용한다면, 상황에 맞춰 타입 추론을 정확하게 해줄 수 있다.