HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 4기 교육생/
📚
4기 스터디 가이드/
🐢
이펙티브 타입스크립트 꼬부기 소통/
4️⃣
재희 기록
4️⃣

재희 기록

 
[재희] v2에서 x 프로퍼티를 as const로 지정하는 것과 v3에서 as const로 readonly화 된 x는 어떤 차이가 있을까요?
[지윤] 속성 하나만 하고 싶으면 속성 하나에만 as const, 전체에 하고 싶으면 객체에 as const를 하면 되지 않을까요?
[재희] 그건 그런데, 추론이 v2에서는 x: 1 , v3에서는 readonly x: 1 이 되니까 다르지 않을까요?
[지윤] 외부로부터 값이 추가되지 않는다고 확정되는 상황일 때 readonly를 사용하면 되지 않을까요?
[재희] v2에서는 객체에서 요소 추가 삭제가 자유롭고 v3에서는 아니다 ~ 인가요?
[지윤] 흠…
[진욱] v2에서는 x를 1로 재할당은 가능한데, v3에서는 아예 재할당이 안되지 않을까요?
[재희] 그러면 x만 두고 보면 똑같은가요?
[진욱] x가 1인 것은 같고, 재할당이 안되는 건 v3에서이고 v2에서는 되겠죠?
[재희] 그러네요, v2에서 x는 같은 1로 재할당이 되고, 그 외에 값은 객체 전체 대상으로 오류를 보여주네요. v3에서는 1로 재할당 해도 안되고, 다른 값도 다 안되네요. 그리고 그 프로퍼티 대상으로만 에러 메세지가 나타나네요. 더 얘기해봐도 좋을 것 같아요.
 
 
[지윤] 이 내용 설명해주실 분 있나요?
[동호] undefined를 걸러내는 내용인데, TS에서 안 걸러진다는 것 같아요.
[지윤] 왜 안걸러지죠?
[재희] 런타임에서는 걸러져요.
[진욱] undefined가 어디서 왔는지 생각해보면 될 것 같아요.
[재희] 어디서 왔죠?
[진욱] find 메서드에서 못 찾으면 undefined가 나타나서 생긴 것 같아요.
[동호] undefined를 필터링하려 했는데, 예상하기론 string 배열인데…
[재희] 근데 왜 filter에서 못 거르는지?
[진욱] filter의 반환 타입이 저런 식으로 돼 있어서 그렇지 않을까요?
[재희] 내부 구현이 그렇게 돼 있는 것 같더라고요.
[지윤] 어떻게요?
[재희] filter 메서드 자체가 내부 콜백에서는 boolean 값 반환에 대한 정의가 전부고, 내부 구현으로 구체화 돼 있지는 않아서 그런 것 같은데, 정확히는 모르겠어요.
[지윤] 그래서 타입 가드를 사용하자~ 인데, 어렵네요.
[효리] 그냥 일단은 머리가 아닌 가슴으로 받아들이는게 맞는 것 같습니다. filter는 undefined로 반환한다?
 
 
[지윤] 갑자기 궁금한데 왜 U | null 인데, undefined가 나오죠?
[태호] 이상한게, 위에 것도 쳐 봤는데 그것도 되던데 왜 안된다고 하는지 모르겠어요.
[동호] 저도 알아봤는데, 업데이트가 됐다고 하더라고요.
[효리] 네 맞아요. 지금은 그냥 넣어도 선택적 속성으로 들어간다고 하더라고요.
[지윤] 그럼 헬퍼함수 필요 없나요?
[효리] 네.
[재희] 어 그러면 처음 것을 의도하고 싶으면 어떡하죠?
[동호] 그냥 유니온 쓰면 되지 않나요?
[진욱] 헬퍼함수 만들어야 할 것 같은데요.
[재희] 어 저는 원래 동작이 자연스럽다고 생각하는데…
[진욱] 저도 그렇게 생각했는데, 코드 동작하고 조금 다르다?
…
더 알아보기로
…
 
[진욱] 아 그리고 방금 null에서 undefined로 넘어간거 있잖아요. Partial<>을 거쳐서 조건부로 처리되어서 undefined로 생기더라고요.
[재희] 어 어디에요? 뭐가 생기죠? U | null 말하시는 건가요?
[진욱] 그죠. U | null 이어서 밑에서 타입이 number | null 일 것 같은데, Partial<>을 거쳐서 그냥 number | undefined 가 된거죠,
[재희] 저는 근데 U | null 은 그냥 null 값 들어오는 경우 생각해서 써 준거고, Partial<>은 상관 없는 내용이라고 생각했는데… 근데 빈 오브젝트는 null 인가요?
[진욱] 흠…
[재희] TS에 null 타입이 따로 있었나요? object랑 다르죠?
[진욱] 네
…
더 알아보기로
…
 
 
구조 분해 사용시 주의점 2-1. 선택적 속싱일 경우, 타입의 경계(?)에 null 값을 추가하는 것이 좋다. 2-2. (?) 빈 배열은 'holes 없음'을 나타내는 좋은 방법이다.
 
3. 속성보다 지역변수를 사용하자.
  • > 함수 호출이 객체 속성의 타입 정제를 무효화 할 수 있다.
[지윤] 저거 근데 경계에 null 값 추가하는 거 이해하셨나요?
[효리] 저거 null 값 추가가 아까 헬퍼함수에서 봤던 U | null 말하는거 아닐까요? 선택적 속성…
[재희] 그런거같은데…
[효리] 나중에 해당 아이템에서 살펴봐요.
 
[효리] 근데 3번에 설명과 예제가 무슨 관련이 있죠?
[지윤] 지역변수에서는 잘 동작하는데, 함수로 호출하면 polygon.bbox를 제거할 가능성이 있어서 타입을 BoundingBox나 undefined로 되돌리는 것이 안전하다고 하네요?
[효리] 흠… 예제랑 설명이랑 관련성이 부족한 것 같아요.
[재희] 뭔가 타입 시스템이 함수의 입력과 반환값에 대한 체크를 하지 내부 구현에 대해 체크를 하니까, 객체 자체를 넘겨주면 어떤 영향을 미칠지 알기 힘들다는 내용 아닐까요?
[효리] 그럼 저 예제가 안좋은 예시인거죠?
[재희] 그런거같은데요.
[진욱] 저 예제 자체가 안좋다기 보다는 저 함수에서 polygon 원본 객체의 내부 요소를 바꾸는 함수가 안좋다는거 아닐까요?
[재희] 그걸 타입 시스템이 파악하기 힘들고, 그 함수 자체가 나중에 내용이 바뀌어서 조작을 하게 바뀌거나 하면 디버깅하기 힘들어 지잖아요, 그래서 애초에 지역변수로 빼거나 비구조화 할당을 사용하는게 낫다는 내용 아닐까요?
왜냐면 함수가 나중에 바뀔 수도 있는데 타입 시스템은 함수 내부 구현을 체크하지 못하니까…
[진욱] 이 내용에선 그 설명이 맞는 것 같네요.
 
 
[효리] 이 부분 모르겠어요. Promise<never>
[진욱] 갑자기 궁금한데, Promise<never>를 안 적어놓으면 뭐로 추론되나요?
[효리] Promise<unknown>이네요. 의미하는 바가 뭔지 모르겠어요.
[동호] 거부된 프로미스에서 처리된 값의 타입이라고 하네요. reject가 되면 Promise<never>
[효리] resolve면요?
[동호] Promise<Response>.
[진욱] 뭐를 resolve 하냐에 따라서 다를거같아요. 예를 들어 resolve(1)이면 Promise<number>가 되지 않을까…
[효리] 맞네요.
[동호] Promise 안에 number라고 넣으면 number로 나와요.
[진욱] number로 넣으면 resolve에 숫자 넣을 수 있는데, 다른 건 오류가 나네요. Promise 리턴하는 함수에는 타입 구문 무조건 정해줘야하는 것 같네요.
[효리] Promise<Response> 타입은… 어떤… 흠…
[진욱] ReturnType<Promise> 해주면 되지 않을까요… 음…
…
[진욱] type A = ReturnType<typeof fetch> 이렇게 하면 Promise<Response>를 만들 수 있네요.
fetch 함수의 리턴 타입이 저거다.
 
 
아이템 27 함수형 기법과 라이브러리로 타입 흐름 유지하기
[지윤] 더 이해하신 분??
[효리] 장에서 설명하는 코드보다는… 절차형 프로그래밍보다 함수형 프로그래밍이나 라이브러리를 사용하는게 구현이 잘 되어있고, 타입체크에 걸릴 일도 없어서 사용하면 좋다. 라는 것 같아요.
[동호] 타입스크립트가 라이브러리 구현을 모델링하기 위해 만들었다고 하네요.
 
 
 
  • 진욱님 문제…
    • 객체의 nested property는 타입을 좁히기 위한 key로 사용 불가하다.
    • 다른 방법이 없을까?
      • 패턴매칭을 통해 선언적으로 typescript를 다뤄보자
      선언적 패러다임을 기반으로 설계되고 있는 프론트엔드 생태계에서 ts-pattern을 통해 살아남는 방법을 소개합니다.
      패턴매칭을 통해 선언적으로 typescript를 다뤄보자
      https://velog.io/@hhhminme/패턴매칭을-통해-선언적으로-typescript를-다뤄보자
      패턴매칭을 통해 선언적으로 typescript를 다뤄보자
       
const v1 = {
	x: 1,
	y: 2,
}

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

const v3 = {
	x: 1,
	y: 2,
} as const
// 6. 타입 가드(is)
// bad -> undefined가 걸러지지 않았다.
const jackson5 = ['Jackie', 'Tito', 'Jermaine', 'Marion', 'Michael'];
const members = ['Janet', 'Michael']
  .map(who => jackson5.find(n => n === who))
  .filter(who => who !== undefined); // 타입이 (string|undefined)[]

//good
function isDefined<T>(x: T | undefined): x is T{
  return x !== undefined;
}
const members = ['Janet', 'Michael']
  .map(who => jackson5.find(n => n === who))
  .filter(isDefined); // 타입이 string[]
// 4. 한꺼번에 여러 속성 추가
declare let hasDates: boolean;
const nameTitle = {name: 'lee', title: 'hi'};
const pharaoh = {
  ...nameTitle,
  ...(hasDates ? {start: -2589, end: -2566} : {})
};
pharaoh.start 
// 오류 -> '{name: string; title: string;}' 형식에 'start' 속성이 없습니다.

// pharaoh.start를 사용하고 싶다면 헬퍼 함수 사용
function addOptional<T extends object, U extends object>(
  a: T, b: U | null): T & Partial<U>{
  return {...a, ...b};
}

const pharaoh = addOptional(
  nameTitle,
  hasDates ? {start: -2589, end: -2566} : null);
pharaoh.start // 정상, 타입이 number | undefined;
function fn(p: Polygon){//...}
polygon.bbox; // 타입이 BoundingBox | undefined
if(polygon.bbox){
  polyhon.bbox; // 타입이 BoundingBox
  fn(polygon);
  polyhon.bbox; // 타입이 BoundingBox
}
function timeout(millis: number): Promise<never> {
	return new Promise((resolve, reject) => {
		setTimeout(()=>reject('timeout'), millise)
	})
}

async function fetchWithTimeout(url: string, ms: number) {
	return Promise.race([fetch(url), timeout(ms)])
}