프론트엔드 정복하기

https://www.typescriptlang.org/docs/handbook/advanced-types.html#interfaces-vs-type-aliases Documentation - Advanced Types Advanced concepts around types in TypeScript www.typescriptlang.org Because an interface more closely maps how JavaScript objects work by being open to extension, we recommend using an interface over a type alias when possible. On the other hand, if you can’t express some sh..

HTMLElement 타입인지 어떻게 알까? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof instanceof operator 에 대한 설명이 나와 있다. 해당 operator 는 좌측 object 에 우측 constructor 의 prototype 을 가지고 있는지 여부를 알게 한다. 예시 export function isHTMLElement(data?: unknown): data is HTMLElement { return data instanceof HTMLElement; }

타입 가드 예시 export function isHTMLElement(data?: unknown): data is HTMLElement { return data instanceof HTMLElement; } instanceof 연산자는 생성자의 prototype 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/instanceof

https://rinae.dev/posts/helper-types-in-typescript

https://puppypaw.tistory.com/175 // JSX에서 제네릭을 쓰면 엘리먼트로 착각하나 보다 ..

interface의 특정 property만을 추출해서 타입을 선언할 때 활용할 수 있다. 아래와 같이 LinkWrapProps 인터페이스는 'links'라는 프로퍼티를 가지고 있는데, 이것은 LinkProps 배열 타입을 가진다. interface LinkWrapProps{ links: LinkProps[]; .... } interface LinkProps{ activeClassName?: string; icon: IconsId; label: string; to: string; } 이제 LinkWrapProps의 links 타입을 가진 변수 LINKS를 선언하고 싶다면 어떻게 해야 할까? interface의 property name으로 해당 propery type만 불러와서 선언해주면 된다. const ..