#24 일관성 있는 별칭 사용하기

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리

📍요약

✅별칭(alias)은 type narrowing을 방해한다

✅변수에 별칭을 사용할 때는 일관되게 사용해야 한다 (런타임에서는 문제가 없어도 타입 범위가 달라질 수 있음)

 

📍별칭 (alias) 을 수정하면 원본 객체도 수정된다

- 객체의 프로퍼티를 별칭으로 지정 후 수정해보기

const borough = {name: 'Brooklyn', location: [40.688, -73.979]};
// 별칭(alias) 생성
const loc = borough.location;
// 별칭의 값을 변경하면 원본도 바뀜
loc[0] = 0;

console.log(loc); // [0, -73.979] 
console.log(borough);
/*
{
  "name": "Brooklyn",
  "location": [
    0,
    -73.979
  ]
} 
*/

 

별칭을 남용하면 제어 흐름을 분석하기 어려움

- 별칭을 신중하게 사용해야 함

 

또한 타입 범위가 달라질 수 있음

- 예시

interface Coordinate {
  x: number;
  y: number;
}

interface BoundingBox {
  x: [number, number];
  y: [number, number];
}

interface Polygon {
  exterior: Coordinate[];
  holes: Coordinate[][];
  bbox?: BoundingBox;
}

// HIDE
const polygon: Polygon = { exterior: [], holes: [] };
function calculatePolygonBbox(polygon: Polygon) {
  // ...
}

// END
const { bbox } = polygon; // 구조분해할당이 더 간결함

// bbox가 옵셔널 프로퍼티인 경우
if (!bbox) {
  calculatePolygonBbox(polygon);  // Fills in polygon.bbox -> 함수에서 별칭을 수정
  // Now polygon.bbox and bbox refer to different values!
  // 별칭과 원본이 분리됨
}

function fn(p: Polygon) { /* ... */ }

// 타입이 달라질 수 있음을 주의!!
polygon.bbox  // Type is BoundingBox | undefined
if (polygon.bbox) {
  polygon.bbox  // Type is BoundingBox
  fn(polygon);
  polygon.bbox  // Type is still BoundingBox
}