Google Analytics의 gg 정의에서 길을 잃음

Qiita Advent Calendar 2021
Type Type Script 통과~Type Script 처음 시작할 때 알고 싶었던 것들~
4일차 기사로.
그때 알았더라면 이렇게 멀리 돌아가지 않은gg 설정의 에피소드를 소개해 드리겠습니다.

최후

해결책

풋내기 걸음

최후

최후

window.gtag('config', 測定ID);

TypeScript 항목에서 이렇게 Google Analythics의 측정만 기술하면window.gtag의 유형에 정의된 오류가 없습니다.
당시의 상황을 돌아보고 이 잘못에서 정답까지의 과정을 총결하였다.
해결책
gg의 유형 정의가 공개되었기 때문에 설치하면 됩니다.
@types/gtag.js 설치 후 window.gtag 정의된 유형의 상태가 됩니다.

# npmのプロジェクトへインストールする場合
npm install @types/gtag.js

# yarnのプロジェクトへインストールする場合
yarn add -D @types/gtag.js

풋내기 걸음
어색한 포인트와 전체적인 누락을 돌려보도록 하겠습니다.
초보자가 방황하는 모습을 살펴봅시다.
어색하다
두 가지 요소가 억지스러워서 해결하기 전에 많은 시간이 걸렸다.

Type Search의 존재를 알아채지 못했습니다. 형식 정의 파일을 찾는 비결을 모르겠습니다.

이해tsconfig.json가 얕은 상태에서 설정했기 때문types@types/gtag.js만 설치하면 전 세계에서 사용할 수 없습니다.tsconfig.json에는 gtag.js와 다른 포장을 도입할 시기에 설정된 types이 있다.
tsconfig.json의 types

{
  "compilerOptions": {
    "types": ["hoge"]
  },
}

당시를 회고하다
일어난 일, 한 일을 순서대로 되돌아보다.

유형 정의가 없으므로 오류 발생

window의 하위 요소에 유형을 추가할 수 있습니까?

쓴맛 피하기

유형 정의를 설치했지만 반응이 없음...

유형 정의 없음, 오류
유형 정의 오류를 예감하는 동시에 gtag부터 사용한다면
역시 잘못이야.

Property 'gtag' does not exist on type 'Window & typeof globalThis'.  TS2339

gg는 윈도 유형도 Type Script의 globlThis 유형도 존재하지 않습니다
그래.
Type Search 검색 유형 정의에 액세스하면 더 빨리 해결됩니다.window의 하위 요소에 유형을 추가할 수 있습니까?
이렇게 말하지만, 나는 내가 만든 변수가 유형을 설정할 수 있다는 것을 안다window에 걸어도 금형을 설정할 수 있습니까?
잘못된 문장으로 직접 검색하면 창의 하위 요소에 유형을 설정할 수 있습니다.
그렇군요. 설정declare global하면 window아이도 틀을 낄 수 있어요!

declare global {
  interface Window {
    gtag: any;
  }
}

anyESLight에게 꾸지람을 듣고 불편했지만 실수가 풀리자 행동을 시작했다.
고육을 피하다any의 모습은 징그럽지만 ggg.왜냐하면 js형 정의를 직접 만드는 끈기가 없어요.
나는 다시 한 번 검색해 보았다.
그래서 우리는 완충 함수gtag의 이본 점화 방법을 알게 되었다.
버전 설정 그리고 점화하는 자제 함수pageViewEvent도 설정했다declare에서 설정pageViewEvent의 유형any은 피했다.
파일 헤더에 점화용pegeViewEvent 설치

<script async src="https://www.googletagmanager.com/gtag/js?id=測定ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  // gtagページビュー送信イベントを実行
  function pageViewEvent(){
    window.gtag('config', 測定ID);
  }
</script>

발화 이벤트 페이지 뷰 이벤트 유형

declare global {
  interface Window {
    pageViewEvent: () => void;
  }
}

decrare라서 안전합니다.

window.pageViewEvent();

단, 오류 없음any도 사용 안 함
진정으로 형식을 정의한 것이 아닌가?
금형 정의를 설치했는데 반응이 없어서...
사실 이때
공개된 gg의 유형 정의가 있습니다. 가져온 해설 기사를 찾았습니다.
단, 절차npm install에 따라 진행하더라도window.gtag 정형이 없어 진행할 수 없습니다.
(이때, 잠시 포기하는 동안...)pegeViewEvent 사기와 사기를 치면서 단서를 검색한다
@types/gtag.js가 작동하지 않는 원인을 발견했습니다!
단, tsconfig.json에 이미 설정types된 경우에는 전역에서 검출되지 않는다.types를 제거하거나 gtag.js를 types에 추가합니다.
(Will Squire의 권장 의역)tsconfig.json 영향이 있나...
어색하다에서 보듯이 gg를 설정하려는 항목에서types에 hoge가 설정되어 있습니다.
types를 설정할 때 의미와 영향을 깊이 연구하지 않고 본보기대로 진행한다.
tsconfig.json

{
  "compilerOptions": {
    "types": ["hoge", "gtag.js"]
  },
}

이렇게 하면 가져온 해설문은 설치만 하면 스타일을 정의할 수 있다
자신의 프로젝트가 유형을 정의할 수 없는 이유를 알고 모두 해결했다.
최후
이 기사를 쓰기 위해서 나는 당시 유행했던 키워드를 추억하고 검색해 보았다
그때보다 더 많은 소식을 발견했어요.
TypeScript의 성황, 혹은 이미 정해진 형세를 느꼈다.
아직 미숙하기 때문에 앞으로도 열심히 공부하겠습니다.