TIL. TypeScript_유니언과 교차타입

유니언 타입

가끔, number나 string을 매개변수로 기대하는 라이브러리를 사용할 때가 있다.

function padLeft(value:string, padding:any){
  if(typeof padding === "number"){
    return Array(padding +1).join(" ")+value;
  }
  if (typeof padding ==="string"){
    return padding +value;
  }
  throw new Error (`Expected string or number, got '${padding}'.`);
}
padLeft("Hello world",4); //"Hello world"를 반환한다.

위 예제에서 padLeft의 문제는 매개변수 padding이 any타입으로 되어있다는 것이다. 즉, number나 string 둘 다 아닌 인수로 함수를 호출할 수 있다는 것이다.

any대신에, 유니언 타입을 매개변수 padding에 사용할 수 있다.

function padLeft(value:string,padding:string | number){
}
let indentedString =padLeft("Hello world", true);

유니언 타입은 여러 타입 중 하나가 될 수 있는 값을 의미한다 세로 막대(|)로 각 타입을 구분하여, number | string | boolean은 값의 타입이 number,string,boolean이 될 수 있음을 의미한다.

교차타입

교차타입은 유니언 타입과 밀접한 관련이 있지만, 사용방법은 매우 다르다. 교차 타입은 여러 타입을 하나로 결합한다. 기존 타입을 합쳐 필요한 기능을 모두 가진 단일 타입을 얻을 수 있다.

interface ErrorHandling{
  success:boolean;
  error?:{message:string};
}
interface ArtworksData{
  artworks:{title:string}[];
}
interface ArtistsData{
  artists:{name:string}[];
}
//이 인터페이스들은
//하나의 에러 핸들링과 자체 데이터로 구성된다.

type ArtworkResponse=ArtworksData & ErrorHandling;
type ArtistsResponse=ArtistsData & ErrorHandling;

const handleArtistsResponse=(response:ArtistsResponse) =>{
  if(response.error){
    console.error(response.error.message);
    return;
  }
  
  console.log(response.artists);
};

참고:https://typescript-kr.github.io/pages/unions-and-intersections.html