はじめに

Vue.js + TypeScript で CDN からスクリプトを読み込んで、xxxx.ts で window.hoge にアクセスするコードをビルドすると Property 'hoge' does not exist on type 'Window'. のビルドエラーが出たので、解決方法を調べて整理した。

TL;DR

  • declare global を使う
    • declare global { interface Window { hoge: any } }
  • ↑ の後に window.hoge = window.hoge || {};
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 問題事象
    2. 解決方法
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.1
BuildVersion:	19B88

$ node -v
v12.7.0

$ npm -v
6.10.3

$ tsc -v
Version 3.5.3

詳細

問題事象

とあるパッケージで npm packages は提供されているが require や import が使えないため、CDN から読み込む必要があった。

public/index.html で CDN から読み込みをし、以降は window.hoge で該当パッケージにアクセスできるようになる、はずだった。

1
2
<script src="https://foo.com/hoge.min.js"></script>
<!-- ↑ 以降は window.hoge でアクセス可能 -->

src/xxxx.ts

1
const hoge = window.hoge;

上記をビルドすると、以下のエラーが出る。

1
2
Property 'hoge' does not exist on type 'Window'.
  > 1 | const hoge = window.hoge;

解決方法

上記を解決するには declare global { interface Window {} } で定義を追加する。

参考: How do you explicitly set a new property on window in TypeScript? - Stack Overflow

1
2
3
4
5
declare global {
  interface Window { hoge: any; }
}
window.hoge = window.hoge || {};
const hoge = window.hoge;

上記であれば、ビルドしてもエラーにはならない。

まとめ

  • declare global を使う
    • declare global { interface Window { hoge: any } }
  • ↑ の後に window.hoge = window.hoge || {};

その他・メモ

TypeScript ニワカなので、もっと Better なやり方があるかも。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list