CDNで読み込んだライブラリもtype safeに扱いたい

こんにちわ、hanetsuki です。
この記事は、htmlファイルに<script />を用いてにcdnやその他ライブラリを読み込んだ際にエラーになってしまうケースがあったので、その時の解決忘備録です。

npm経由ではなく、CDNで読み込まなければならない制約があるケース...ありますよね（？）

やっぱりTypeScriptで書きたい

私は、TypeScriptが好きなので限りなく利用したいと考えています。
しかし何も対させずにVueを扱おうとするとエラーで怒られます。

index.html

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script src="./app.js"></script>

app.ts

const { createApp } = Vue; // ❌ 名前 Vue が見つかりません。

createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
}).mount('#app');

Vueは、どこにも定義できていないのでTypeScriptがエラーを出すのは当たり前ですね...

では、解決していきましょう。

解決策

@types/vue.d.ts

import type * as _Vue from 'vue';

declare global {
  const Vue: typeof _Vue
}

export {}

**.d.tsを作成します。これにより、プロジェクト全体にグローバルな変数としてVueが利用できるようになります。

余談：windowオブジェクトの場合

googleアナリティクスを扱う上でよく出会うのが、windowを拡張する場面です。
windowを拡張する場合は以下のようにすると良いです。

@types/window.d.ts

declare global {
  interface Window {
    hoge: string[];
    piyo: number;
  }
}

上記のように対応することでwindow.hogeをtsファイルで呼び出したときに型補完が効いた状態で取り扱うことができます。

最後に

今回はCDNをモデルケースにお話を進めましたが、プロジェクトでは独自のSDKなどを取り扱わなければならないという場面が少なからずあります。

今回の方法は、そういったnpm経由では扱えない場面でモダンな開発がしたい！！！型補完を効かせたい！！という方に向けての対応でした。

少しでも助けになれば幸いです。
それではこれにて