[TypeScript & Module Typing] 코이(정인교) 미션 제출합니다. #17
Conversation
| declare function _(selector: string): HTMLElement; | ||
| declare module _ { | ||
| function fetch<T>(url: string, config: RequestInit): Promise<T>; | ||
| function isNull<T>(value: T): boolean; |
| } | ||
|
|
||
| interface CustomElement { | ||
| innerHtml: (html: string) => string; |
There was a problem hiding this comment.
| innerHtml: (html: string) => string; | |
| innerHTML: (html: string) => string; |
대문자는 어떤가요?
There was a problem hiding this comment.
좋습니다! 아까처럼 객체로 바꾸면 대문자로 써도 되겠네요~!
| const element = document.querySelector<HTMLElement>(selector); | ||
|
|
||
| if (element === null) { | ||
| throw new Error("Element is null"); |
There was a problem hiding this comment.
innerHTML이나 그런 함수를 쓸때 error를 뿜는건 어떨까요?
document.querySelector도 element를 못찾았다고 해서 Error을 뿜지는 않으니까요!
| element.addEventListener(type, handler); | ||
| }; | ||
|
|
||
| element.show = show; |
There was a problem hiding this comment.
element에 직접 show, hide 같은 함수를 넣으면
querySelector로 얻은 element와 _로 얻은 element의 차이가 모호해질것 같아요.
예를들어서
element는 아직 show함수를 넣지 않았는데, HTMLElement가 CustomElement를 extends하고 있어서, 타입에 show함수가 잡힙니다!
개선이 필요해 보여요 :D
| export function fetch() { | ||
| return {}; | ||
| } | ||
| export function fetch<T>(url: string, config: RequestInit): Promise<T> { |
There was a problem hiding this comment.
fetch에 generic T를 받았는데, return fetch에서는 T를 사용하고 있지 않네요!
https://stackoverflow.com/questions/41103360/how-to-use-fetch-in-typescript
여기를 참고해 주세요 :D
There was a problem hiding this comment.
이렇게도 가능하군요 !! 감사합니당. 지금은 지우는게 낫겠네요!
| "baseUrl": ".", | ||
| "declaration": true, | ||
| "declarationDir": "./lib", | ||
| "emitDeclarationOnly": true, |
| "name": "ts-module", | ||
| "version": "1.0.0", | ||
| "description": "", | ||
| "main": "index.js", |
| test('`_("").addEvent()`~~~~', () => {}); | ||
| test("hidden 동작 확인", () => { | ||
| const buttonElement = _("button.test-btn"); | ||
| buttonElement.style.display = "block"; |
| const buttonElement = _("button.test-btn"); | ||
| buttonElement.style.display = "block"; | ||
| buttonElement.hide(); | ||
| expect(buttonElement.style.display).toBe("hidden"); |
There was a problem hiding this comment.
| expect(buttonElement.style.display).toBe("hidden"); | |
| expect(buttonElement.style.display).toBe("none"); |
| test('`_("").hidden()`~~~~', () => {}); | ||
| test("show 동작 확인", () => { | ||
| const buttonElement = _("button.test-btn"); | ||
| buttonElement.style.display = "hidden"; |
There was a problem hiding this comment.
| buttonElement.style.display = "hidden"; | |
| buttonElement.style.display = "none"; |
🔥 팀 미션 적용 결과
본 미션을 수행하며 경험, 영감, 학습한 내용을 팀 미션에 전파해주세요.
✅ 요구사항 구현 확인
DOM 유틸
유틸
🧐 공유
/_ 작업하면서 든 생각, 질문, 새롭게 학습하거나 시도해본 내용 등등 공유할 사항이 있다면 자유롭게 적어주세요 _/
npm 패키지
아직 팀프로젝트에 반영하지는 않았습니다