[TypeScript & Module Typing] 아놀드(한수빈) 미션 제출합니다. #10

sanaandmomo · 2022-09-27T13:01:46Z

🔥 팀 미션 적용 결과

본 미션을 수행하며 경험, 영감, 학습한 내용을 팀 미션에 전파해주세요.

실제 코드 반영 후 팀 프로젝트에서 타입 테스트 진행
자주 사용되는 타입을 유틸로 출시하여 분리

✅ 요구사항 구현 확인

필히 테스트 & 타입이 포함

DOM 유틸

innerHTML()
show()
hidden()
addEvent()

유틸

🧐 공유

/_ 작업하면서 든 생각, 질문, 새롭게 학습하거나 시도해본 내용 등등 공유할 사항이 있다면 자유롭게 적어주세요 _/

https://www.npmjs.com/package/ternoko-utils-type << npm 링크
Valueof라는 타입을 npm에 배포하여 팀에 적용하였습니다.
처음 npm에 배포도 해보고 직접 install해서 사용해보니 너무 뿌듯했습니다~~

moonheekim0118

안녕하세요 아놀드~ 아놀드의 코드 리뷰를 하다니 영광입니다 하하
오히려 제가 코드 리뷰하면서 많이 배웠습니다.
터놓고 프로젝트에 ValueOf 타입 분리하신것도 간결하구 좋네요!

부족한 실력으로 질문 몇개랑 리뷰 몇개 남겨보았습니다
그리구.. api 테스트는 진행안해주셔서 그런지 테스트가 안돌아가네요 ~ 허허
아무튼 고생하셨습니다 ! 역시... 짱 !

moonheekim0118 · 2022-09-28T02:14:05Z

src/index.ts

+  function addEvent<T extends keyof GlobalEventHandlersEventMap>(
+    type: T,
+    listener: (e: GlobalEventHandlersEventMap[T]) => void
+  ) {
+    element.addEventListener(type, listener);


eventType 으로 타입스크립트에서 제공해주는 GlobalEvenTHandlersEventMap 인터페이스를 활용해주셨네요 👍

그런데 찾아보니

이런 계층구조를 갖고 있는 것 같아요.
어차피 이벤트 리스너가 부착될 element 의 타입이 HTMLElement 로 추론되는데, 이에 대해 이벤트타입도 타입을 좁혀줘서 HTMLElementEventMap을 사용하면 어떨까요?
아니면 다른 이유가 있으실까요?

와 호프 인터페이스에 대한 문서까지 찾아주시다니 너무 감사합니다!!
저는 문서보다는 코드를 믿는 편이거든요!
vscode에서 지원해주는 정의로 이동 기능을 이용해서 살펴본 결과

interface HTMLElementEventMap extends ElementEventMap, DocumentAndElementEventHandlersEventMap, GlobalEventHandlersEventMap { }

이러한 코드를 볼 수 있었습니다.
즉, GlobalEventHandlersEventMap가 더 좁은 타입이였던 거죠!
그렇기에 위 타입을 사용했습니다!

그렇군요 감사합니다 !! 👍
문서보다는 직접 타입이 어떻게 정의되어 있는지를 확인하는게 좋겠군요!

moonheekim0118 · 2022-09-28T02:15:04Z

src/index.ts

+  type FetchBodyType =
+    | string
+    | URLSearchParams
+    | FormData
+    | Blob
+    | ArrayBuffer
+    | ArrayBufferView
+    | DataView;
+
+  type Url = `http${'' | 's'}://${string}`;


BodyType 과 Url 타입까지 꼼꼼하게 잡아주셨네요 굿👍

감사합니다!

호프의 질문

Url 타입까지 잡아줘야하나? 어디까지 타입가드를 해줘야하나?

아놀드의 말씀

타입스크립트를 사용하는 이유란..?

자바스크립트 환경에서 런타임 에러들을 타입스크립트를 통해 컴파일단에서 잡으려고 사용한다.

런타임 에러는 휴먼에러까지 포함된다.

fetch 에 url 을 string 으로 주면 abc 이런 잘못된 url 도 들어올텐데, 이게 런타임 에러를 유발할 것인데, 이걸 타입스크립트로 잡을 수 있지 않을까요 ??

👍

moonheekim0118 · 2022-09-28T02:16:15Z

src/index.ts

+    return new Promise((resolve, reject) => {
+      const response: Response<Data> = {
+        status: 200,
+        ok: true,
+        statusText: 'example code',
+        json: () => {
+          return new Promise((resolve, reject) => {
+            resolve('아무튼 데이터임..!' as unknown as Data);
+          });
+        },
+      };
+
+      resolve(response);
+    });
+  }


오호 👍 👍 이렇게 구현해주셨군요 대단합니다

호프의 질문: 왜 타입단언에 as unknown 을 붙여야할까요?

아놀드의 말씀

왜 as Data 하면 에러가 뜰까요?

두 형식이 충분히 겹치지 않기 때문이다.

개발자 : "너 이거 타입 이렇게 달거라"
타입스크립트 : "주인님~ 아무리그래도 이건 좀 선넘지 않습니까? ㅠㅠ 니가 내 주인이라니. 삭제해주세요 차라리.."

타입스크립트: -> as unknown 으로 하면 " 아잇..난 안볼란다..ㅠ..니 멋대로해라. 모르쇠!"

moonheekim0118 · 2022-09-28T02:25:00Z

src/index.ts

+  type Nullable<T> = T extends null ? T : never;
+  export function isNull<T>(value: T): value is Nullable<T> {
+    return value === null;
+  }
+
+  type Nilable<T> = T extends null | undefined ? T : never;
+  export function isNil<T>(value: T): value is Nilable<T> {
+    return isNull(value) || value === undefined;
+  }
+
+  type Numberable<T> = T extends number ? T : never;
+  export function isNumber<T>(value: T): value is Numberable<T> {
+    return typeof value === 'number';
+  }
+
+  type Functionable<T> = T extends Function ? T : never;
+  export function isFunction<T>(value: T): value is Functionable<T> {
+    return typeof value === 'function';
+  }
+


제네릭을 사용하셔서 -*able 타입을 정의해주셨네요..! 👍 제네릭에 값을 넣지 않아두 알아서 추론이 잘 되어서 잘동작하네요.

요롷게 false 값이 반환될 상황에서는 리턴타입이 value is never 로 잡히는데,
이렇게 하신 이유가 있으실까요 ??
저는 단순히 value 는 any 혹은 unknown 타입으로 받고 리턴타입을 value is 타입 이렇게 정해줬는데
-*able 타입을 활용하신 이유가 너무 궁금합니다 !! 알려주세요 아놀드!!

value is type 으로 리턴 타입을 설정하면 잘못된 인수를 넣어도 마우스 커서를 올렸을 때 value is type 식으로만 함수의 리턴 타입을 알려줍니다.
-*able 처럼 조건부 타입을 정의하고 리턴 타입으로 사용한다면 잘못된 인수를 넣었을 때 조건에 맞게 value is type | value is never 형식으로 컴파일 단에서 true를 반환할지 false를 반환할지 알려주기 때문에 매우 편리합니다.

아놀드의 말씀

사용자 정의 타입가드란?

말그대로 boolean, number 와 같은 원시타입이라던지 함수타입이라던지 언어단에서 존재하는거잖아요? value is~ 이런건 듣도보도 못한 타입이잖아요. 이런 구문을 사용자 정의 타입가드라고 합니다.

nullable 쓴 이유

hover 했을 때 잘못된 타입일 경우 value is never 로 뜬다.

moonheekim0118 · 2022-09-28T02:29:43Z

src/index.ts

+  export function pick<T extends Record<string, unknown>, R extends keyof T>(
+    obj: T,
+    ...keys: R[]
+  ): Pick<T, R> {


타입이 아주 잘 잡혀있네용 구웃 👍 👍

moonheekim0118 · 2022-09-28T04:51:12Z

__tests__/type.test.ts

+
+expectType<{ a: 1; b: 2 }>(_.pick({ a: 1, b: 2, c: 3 }, 'a', 'b'));
+
+expectType<{ c: number }>(_.omit({ a: 1, b: 2, c: 3 }, 'a', 'b'));


왜 pick 과 달리 omit 은 반환되는 객체의 프로퍼티 타입을 리터럴로 못잡고 더 넓게 number 로 잡을까요 ??
{c: 3} 을 넣었더니 Type 'number' is not assignable to type '3'. 이라구 나오네요.

function pick<T extends Record<string, unknown>, R extends keyof T>( obj: T, ...keys: R[] ): Pick<T, R> { return keys.reduce((acc, key) => { acc[key] = obj[key]; return acc; }, {} as Pick<T, R>); } function omit<T extends Record<string, unknown>, R extends keyof T>( obj: T, ...keys: R[] ): Omit<T, R> { return keys.reduce( (acc, key) => { delete acc[key]; return acc; }, { ...obj } ); }

제 예상에는
pick 함수에서는 위와 같이 타입 단언을 해준 빈 객체를 reduce 기본값으로 갖고
omit 함수는 기존의 Record<string, unknown> extends 하는 obj 를 기본값으로 가져서 그런 것 같아요
그러면 omit 도 Pick 처럼 정확히 타입이 잡힌 객체를 반환하도록 동작하게 하면 어떨까요?

와 시도해보고 있는데 빡세네용; 호프한테 물어보면서 해야겠어요!

너무 어려워요 ㅠㅠ 아놀드가 해결해주고 공유해주시라 믿습니다!!

moonheekim0118 · 2022-09-28T05:04:48Z

src/index.ts

-	export function throttle() {}
+  export function clickOutside(
+    dom: HTMLElement,
+    func: (...args: any[]) => void


(...args: any[]) => void
이렇게 생긴 함수타입이 계속 재사용되는데 타입으로 하나 분리하셔서 재사용하시는거 어떠신가요?!

moonheekim0118 · 2022-09-28T05:08:46Z

src/index.ts

+    return (...args: any[]) => {
+      if (!timer) {
+        timer = setTimeout(() => {
+          timer = null;
+          func(...args);
+        }, wait);
+      }
+    };
+  }


리턴되는 함수의 args 가 결국 func 매개변수의 args 로 들어가네요!
그렇다면 확실하게 두 args 타입을 어떻게든 일치시켜보는거 어떠신가요 !!
저라면 아래와 같이 할 것 같아요

Suggested change

return (...args: any[]) => {

if (!timer) {

timer = setTimeout(() => {

timer = null;

func(...args);

}, wait);

}

};

}

export function throttle<T extends (...args: any[]) => void>(

func: T,

wait: number

): (...args: Parameters<T>) => void {

let timer: ReturnType<typeof setTimeout> | null = null;

return (...args: Parameters<T>) => {

if (!timer) {

timer = setTimeout(() => {

timer = null;

func(...args);

}, wait);

}

};

}

이것도 어렵네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 호프 옆에서 물어보면서 고칠게요!

moonheekim0118 · 2022-09-28T05:15:05Z

src/index.ts

+    func: T,
+    wait: number
+  ): (...args: any[]) => void {
+    let timer: ReturnType<typeof setTimeout> | null = null;


ReturnType 이렇게 활용하는군요! 배워갑니다 👍

moonheekim0118 · 2022-09-28T05:22:53Z

__tests__/type.test.ts

+expectType<void>($button.show());
+
+expectType<void>($button.hide());
+


음 리턴타입에 대한 테스트를 진행해주셨네요!

expectType<(array: number[]) => number[]>(_.shuffle<number>);

저는 위처럼 함수 타입 자체를 테스트해주었는데요, 뭐가 더 좋은방법일까요 ? 저도 잘 모르겠네요ㅎㅎ
아니면 둘다 해주는게 좋을까요?
제네릭에 들어오는 타입에 따라서 반환타입이 달라지는 경우가 있어서 함수 타입 자체를 테스트하는게 좋다구 생각했어요. 근데 지금 생각하니 반환타입만 체크해도 충분할 것 같기도..?
아놀드의 생각은 어떠신가요 ??

저는 반환 타입만 해도 충분하다고 생각합니다!
함수 타입 테스트는 1은 1이냐? 라고 테스트 하는 격 같아요!

음 그렇네요! 저는 함수타입테스트를 했는데 아놀드말을 들어보니 그런것같아요.
소중한 의견 감사합니다!

moonheekim0118

수정해주신 부분 다 확인했습니다 아놀드~~
코드리뷰 하면서 많이 얘기도 나누고 많이 배워서 너무 즐거웠어요 ㅎㅎ
아놀드의 말씀 잊지않을게요!!
제안 드린것도 빠르게 잘 반영해주셔서 감사합니다ㅎㅎ
이번 미션 넘 수고하셨어요! 터놓고 화이팅!

sanaandmomo added 30 commits September 26, 2022 15:28

build: tsconfig 설정

b63fadd

chore: jest 환경 설정

ea35092

chore: gitignore 설정

e6b0b5b

feat: numberRange 만드는 유틸 타입

3b9c571

feat: fetch 타입 선언

12766b3

test: fetch 타입 테스트 작성

474d305

feat: isNull 타입 선언

fd357e0

test: isNull 타입 테스트

e011a0d

feat: isNil 타입 선언

49a291c

test: isNil 타입 테스트 작성

73105eb

feat: isNumber 타입 선언

445c483

test: isNumber 타입 테스트 작성

27f7cd9

feat: shuffle 타입 선언

7156a96

test: shuffle 타입 테스트

5cb1b9b

feat: pick 타입 선언

54f61bf

test: pick 타입 테스트

5ce5c29

feat: omit 타입 선언

5a26472

test: omit 타입 테스트

cf4cdb1

feat: memoize 타입 선언

608734c

test: memoize 타입 테스트

1e4c987

feat: debounce 타입 선언

962c2f5

test: debounce 타입 테스트

b3adf88

feat: throttle 타입 선언

b635d42

test: throttle 타입 테스트

e0f2330

feat: clickOutside 타입 선언

79dc6f7

test: clickOutside 타입 테스트

5112804

feat: Node 인터페이스 확장

267ce7b

test: Node addEvent 타입 테스트

e56cbb0

test: Node show, hidden 타입 테스트

9656a86

test: Node innerHTML 타입 테스트

6f52b9c

sanaandmomo added 15 commits September 27, 2022 14:53

feat: fetch 함수의 인자 url 타입 리터럴 타입으로 수정

a9279ce

feat: isNull 함수 구현

b35ad20

feat: isNil 함수 구현

746acad

feat: isNumber 함수 구현

bbbd2e6

feat: isFunction 함수 구현

69402ad

feat: shuffle 함수 구현

d2709f0

feat: pick 함수 구현

1945569

feat: memoize 구현

e0a59c5

feat: debounce 구현

375e258

feat: throttle 구현

b6b3a43

clickOutside 구현

795f3ae

build: 출력물 경로 수정

42a4938

build: d.ts 파일만 생성하도록 설정

f0e86f1

feat: dom util 타입 리팩터링 및 테스트 코드 수정

c035e27

feat: fetch 타입 선언

9dc457c

moonheekim0118 suggested changes Sep 28, 2022

View reviewed changes

sanaandmomo added 6 commits September 29, 2022 12:21

test: 테스트 코드 test 함수로 래핑

a186246

refactor: 중복되는 함수 타입 제거

8e9f0e9

refactor: thrrotle 함수의 arg 타입을 일치시키기

27672ed

feat: memoize, debounce, throttle args 타입 동기화

dead710

test: api 테스트

96feecd

refactor: memoize, debounce, throttle 함수 타입 Parameters 를 통해 일관성 맞추기

00d3ec4

moonheekim0118 approved these changes Sep 29, 2022

View reviewed changes

moonheekim0118 merged commit 63630bd into woowacourse:sanaandmomo Sep 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TypeScript & Module Typing] 아놀드(한수빈) 미션 제출합니다. #10

[TypeScript & Module Typing] 아놀드(한수빈) 미션 제출합니다. #10

sanaandmomo commented Sep 27, 2022 •

edited

Loading

moonheekim0118 left a comment

moonheekim0118 Sep 28, 2022

sanaandmomo Sep 29, 2022

moonheekim0118 Sep 29, 2022

moonheekim0118 Sep 28, 2022

sanaandmomo Sep 29, 2022

moonheekim0118 Sep 29, 2022 •

edited

Loading

moonheekim0118 Sep 28, 2022

moonheekim0118 Sep 29, 2022

moonheekim0118 Sep 28, 2022

sanaandmomo Sep 29, 2022

moonheekim0118 Sep 29, 2022

moonheekim0118 Sep 28, 2022

moonheekim0118 Sep 28, 2022

sanaandmomo Sep 29, 2022

moonheekim0118 Sep 29, 2022

moonheekim0118 Sep 28, 2022

sanaandmomo Sep 29, 2022

moonheekim0118 Sep 28, 2022 •

edited

Loading

sanaandmomo Sep 29, 2022

moonheekim0118 Sep 28, 2022

moonheekim0118 Sep 28, 2022 •

edited

Loading

sanaandmomo Sep 29, 2022

moonheekim0118 Sep 29, 2022

moonheekim0118 left a comment


		expectType<{ a: 1; b: 2 }>(_.pick({ a: 1, b: 2, c: 3 }, 'a', 'b'));

		expectType<{ c: number }>(_.omit({ a: 1, b: 2, c: 3 }, 'a', 'b'));

		expectType<void>($button.show());

		expectType<void>($button.hide());

[TypeScript & Module Typing] 아놀드(한수빈) 미션 제출합니다. #10

[TypeScript & Module Typing] 아놀드(한수빈) 미션 제출합니다. #10

Conversation

sanaandmomo commented Sep 27, 2022 • edited Loading

🔥 팀 미션 적용 결과

✅ 요구사항 구현 확인

DOM 유틸

유틸

🧐 공유

moonheekim0118 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moonheekim0118 Sep 29, 2022 • edited Loading

Choose a reason for hiding this comment

호프의 질문

아놀드의 말씀

Choose a reason for hiding this comment

Choose a reason for hiding this comment

호프의 질문: 왜 타입단언에 as unknown 을 붙여야할까요?

아놀드의 말씀

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

아놀드의 말씀

사용자 정의 타입가드란?

nullable 쓴 이유

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moonheekim0118 Sep 28, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moonheekim0118 Sep 28, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moonheekim0118 left a comment

Choose a reason for hiding this comment

sanaandmomo commented Sep 27, 2022 •

edited

Loading

moonheekim0118 Sep 29, 2022 •

edited

Loading

moonheekim0118 Sep 28, 2022 •

edited

Loading

moonheekim0118 Sep 28, 2022 •

edited

Loading