문익점 스토리
메인화면
  • 분류 전체보기
    • 먹방
    • 코딩
    • 백준
    • 알고리즘
    • 공고문
메인화면
  • 분류 전체보기
    • 먹방
    • 코딩
    • 백준
    • 알고리즘
    • 공고문
블로그 내 검색

문익점 스토리

안녕하세요. 문익점이에요. 문익점에 대해 아시나요? 목화씨를 가져온 문익점이요!

  • 코딩

    React Typescript에서 document에 함수 등록하기

    2021. 11. 15.

    by. 문익점

    반응형

    window open으로 띄운 팝업에서 opener를 통해 함수를 실행시키기 위해 document에 함수를 등록해야한다(postMessage로도 가능). 이때 CRA typescript template으로 만들게되면 Document가 명세되어 있어 document이 가질 수 있는 맴버변수, 메소드들이 등록되어 있다. 여기서 함수를 등록하려면 에디터딴에서 오류가 발생한다. 

    interface DocumentWithNoti extends Document {
      setPushNotification(enable: boolean, token: string): void;
    }

    위 처럼 Document를 커스텀 할 수가 없으니 상속을 이용하여 따로 정의해줘야 한다. 그 다음 사용은 아래와 같이 사용한다.

    (document as DocumentNoti).setPushNotification = setPushNotification;

    타입을 강제적으로 지정해주고 적용해주면된다.

    반응형
    저작자표시 (새창열림)

    '코딩' 카테고리의 다른 글

    CSR과 SSR의 설명 및 장단점  (0) 2021.11.19
    브라우저의 랜더링 과정  (0) 2021.11.16
    리액트(CRA)에서 테스트하는 방식 분석하기  (0) 2021.11.07
    유닛 테스트와 리액트 테스트  (0) 2021.11.06
    AsyncBoundary에서 에러 객체를 이용한 에러 핸들링  (0) 2021.11.02
    이 글을 본 사람들도 관심있게 본 글
    • CSR과 SSR의 설명 및 장단점 2021.11.19
    • 브라우저의 랜더링 과정 2021.11.16
    • 리액트(CRA)에서 테스트하는 방식 분석하기 2021.11.07
    • 유닛 테스트와 리액트 테스트 2021.11.06
Designed by Organic
블로그 이미지
문익점

티스토리툴바