타입스크립트 올인원( 공변성,오버로딩,에러)

Filter 직접구현!

interface Arr<T>{
    forEach(callback: (item:T)=>void):void;
    map<S>(callback:(v:T)=>S):S[];
    filter<S>(callback:(v:T)=>v is S): S[];
}


const c3:Arr<number|string> =[1,'2',3,'4',5];
const d3=c3.filter((v): v is string=>typeof v==='string');
//filter 직접 구현, ts는 인라인으로쓰나, 변수선언으로 쓰나 똑같다!

이런식으로, Filter를 직접 구현할 수 있다. 지난시간에 하던 내용이니 가볍게 패스~!

공변성?비공변성?

함수간의 서로 대입할 수 있냐?없냐?가 바로 공변성!

function ad(x:string):number{
    return +x;
}

type Bd=(x:string)=>number|string;
const bd: Bd=ad; 
//Bd에 ad를 대입할 수 있다!
// 하지만, Bd와 ad의 타입은 다른데??

리턴값은, 더 넓은 타입으로 대입할 수 있기 때문이다!이게 바로 공변성

function ad(x:string):number|string{
    return +x;
}

type Bd=(x:string)=>number;
const bd: Bd=ad; 

이런식으로, 넓은 타입을 더 좁은 타입으로 대입할 경우 에러가 발생한다!

리턴값은 넓은 타입으로 대입 가능하다.

function ad(x:number|string):number{
    return +x;
}

type Bd=(x:string)=>number;
const bd: Bd=ad; 

하지만, 매개변수는 리턴값이랑 반대다! 딱 이렇게 생각하자. 좁은 타입으로는 대입이 되지만, 넓은 대입이라는 대입이 안된다. 리턴값과 매개변수는 반대다라고만 기억하자

function ad(x:number|string):number{
    return +x;
}

type Bd=(x:string)=>number|string;
const bd: Bd=ad; 

따라서, 이런 형식의 대입은 가능하게 된다.(리턴값은 좁->넓, 매개변수는 넓->좁 가능)

let a=5;// 5는 number

이럴경우, 5는 5라는 타입이 아닌, number로 넓혀주는게 넓픽, 그리고 string|number인 a를 number로 좁혀주는 경우를 좁픽이라고 한다.(용어가..?)

타입 오버로딩

function p1(x:number,y:number):number
function p1(x:string,y:string):string
function p1(x:number|string,y:number|string){
    return x+y;
}

이렇게 타입을 여러개 선언해주는게 오버로딩이라고 한다. Filter와 같은 것도 오버로딩의 예시이다. 이는 옵셔널을 대체 해줄 수 도 있다.

p1(1,2);
p1('2','3');

이런식으로, 옵셔널 대신에 여러개의 함수 코드를 작성함으로써. ,타입스크립트는 알맞은 하나를 골라서 작동되게 해준다!

타입스크립트의 건망증 + 에러 처리

interface Axios{
    get(): void;
}
interface CustomError extends Error{
    response?:{
        data:any;
    }
}

console.error(err as CustomError).response.data;

이렇게, CustomError를 통해서 에러 처리가 가능하다.여기서 에러체크를 해주었지만, 바로 다음 줄에 가면 까먹게 된다. 바로 밑에
err.response?.data를 치게 되면, err은 undefined가 되어버린다. 따라서, 변수에다가 저장해주는 버릇을 가지자!

추가로, 다른 library에서 unknown으로 선언된 타입은, as로 타입을 선언해줘야한다.