🛡️
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経由では扱えない場面でモダンな開発がしたい!!!型補完を効かせたい!!という方に向けての対応でした。
少しでも助けになれば幸いです。
それではこれにて

ちょっと株式会社(chot-inc.com)のエンジニアブログです。 フロントエンドエンジニア募集中! カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion