이펙티브 타입스크립트 20~ 31

공효은·2023년 11월 8일
0

typescript

목록 보기
7/8
post-thumbnail

1. 타입 추론의 강도를 직접 제어하려면 타입스크립트의 기본 동작을 재정의 해야한다. const 단언문을 사용하면 타입스크립트는 최대한 좁은 타입으로 추론한다. const 단언문을 사용했을때 타입스크립트가 타입을 어떻게 추론했을지 쓰시오!

1)

const v2 = {
  x: 1 as const,
  y: 2
}

2)

const v3 = {
  x: 1,
  y: 2,
} as const;

2. 타입스크립트는 일반적으로 조건문에서 타입을 좁히는 데 매우 능숙하다. 하지만 실수를 저지르기 쉽다. 다음 예제는 유니온 타입에서 null을 제외하기 위해 잘못된 방법을 사용한 예시이다. 무엇이 잘못되었는지 설명하시오

const el = document.getElementbyId('foo'); // 타입이 HTMLElement | null
if (typeof el === 'object') {
  el; // 타입이 HTMLElement | null
}

3. 다음 코드에서 filter함수를 사용해 undefined를 걸러 내려고 해도 잘 동작 하지 않는다. 이럴때 어떻게 하면 타입을 좁힐 수 있을까? 예시 코드까지 작성하면 좋다~!

(string | undefined) [] => string[] 으로 만들고 싶다!

const jacksonn5 = ['Jackie', 'Tito', 'Jermaine', 'Marlon', 'Michael'];
const memebers = ['Janet', 'Michael'].map(
	who => jackson5.find(n => n === who)
).filter(who => who !== undefined); // 타입이 (string | undefined)[]

4. 다음코드에 대한 문제점으로 옳지 않은 것을 고르시오

interface State {
  pageText: string;
  isLoading: boolean;
  error?: string;
}
function renderPage(state:State){
  if(state.error){
    return `Error! Unable to load ${currentPage} : ${state.error}`;
  } else if (state.isLoading){
    return `Loading ${currentPage}...`;
  }
  return `<h1>${currentPage}</h1>\n${state.pageText}`
}
async function changePage(state: State, newPage: string){
  state.isloading = true;
  try {
    const response = await fetch(getUrlForPage(newPage));
    if(!response.ok){
      throw new Error(`Unable to load ${newPage}: ${response.statusText}`);
      const text = await response.text();
      state.isLoading = false;
      state.pageText = text;
    }
  } catche (e){
    state.error = '' + e;
  }
}
  1. State 타입은 isLoading이 true 이면서 동시에 error 값이 설정되는 무효한 상태를 허용하지 않는다.
  2. 오류가 발생했을 때 state.isLoading을 false로 설정하는 로직이 빠져있다.
  3. state.error를 초기화 하지 않아서 페이지 전환 중에 로딩 메시지 대신 과거의 오류 메시지를 보여준다.
  4. 페이지 로딩중에 사용자가 페이지를 바꿔 버리면 어떤 일이 벌어질 지 예상 하기 어렵다. 새 페이제에 오류가 뜨거나, 응답이 오는 순서에 따라 두번째 페이지가 아닌 첫 번째 페이지로 전환될 수 있다.

5. 다음중 주석에 대한 문제점으로 틀린것을 고르시오

/**
* 전경색(foreground) 문자열을 반환한다.
* 0 개 또는 1개의 매개변수를 받는다.
* 매개변수가 없을 때는 표준 전경색을 반환한다.
* 매개변수가 있을 때는 특정 페이지의 전경색을 반환한다.
*/
function getForegroundColor(page?:string){
  return page === 'login' ? {r: 127, g:127, b:127}: {r:0, g:0, b:0};
}
  1. 함수가 string 형태의 색깔을 반환한다고 적혀있지만 실제로는 rgb 객체를 반환한다.
  2. 함수가 0개 또는 1개의 매개변수를 받는다고 설명하고 있지만, 타입 시그니처만봐도 명확히 알 수 있다.
  3. 불필요하게 장확하다. 함수 선언과 구현체보다 주석이 더 긹다.
  4. 누군가 강제하지 않는 이상 주석은 코드와 동기화 되지 않는다.
  5. 주석에 타입 정보를 적는것 은 좋다.
profile
잼나게 코딩하면서 살고 싶어요 ^O^/

0개의 댓글