Q&A
Property 'Vue' does not exist on type 'Window' というエラーがでました
TypeScript初心者で理解不足な点があると思いますが、以下について質問します。
TypeScriptもVue.jsもどちらもバージョンは最新とします。
※ 【12/1補足追加】 ビルドはtscを使用しており、tsconfigも特に設定しておりません。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>TypeScript - Vue.js</title> 8</head> 9<body> 10 <div id="app"> 11 {{ message }} 12 </div> 13 <script src="https://unpkg.com/vue"></script> 14 <script src="script.js"></script> 15</body> 16</html>
↑ このような構成でVue.jsは別途読み込んでいます（この構成は変えられません）
TypeScript
1new Vue({ 2 el: '#app', 3 data: { 4 message: 'Hello Vue!' 5 } 6})
上記のように別ファイルにて記述していく場合、npmなどでインストールしたVue.jsを
import Vue from 'vue'をしなければCannot find name 'Vue'.とエラーになってしまいます。
Vue.jsは外部ファイルとして読み込みたいので、このファイルでimportするのを回避したいのですが方法が分かりません。
こちら解決方法をご教示いただければと思います。宜しくお願いします。
回答3件
0
tsファイルの先頭行に以下のコードを入れると補完が効くと思うのですがどうでしょうか？
import * as _Vue from 'vue'; declare global { const Vue: typeof _Vue; }
もしかしたら globalじゃなくてwindowかもしれません。
あとnpm install vue 自体は実行が必要です。型定義ファイルを入手しないといけないので。
投稿2017/11/30 09:36
総合スコア708
0
ベストアンサー
補完は効かなくなると思いますが
import Vue from 'vue'を
ts
1interface Window { 2 Vue?: any; 3} 4 5declare var window: Window 6 7const Vue = window.Vue
に置き換えると良いでしょう。
投稿2017/11/28 06:12
編集2017/11/30 01:47
総合スコア24
0
今回はTypescript単体でしたがwebpackを使用している場合は以下の方法でも解消されました
Typescript
1import Vue from 'vue' 2 3new Vue({ 4 el: '#app', 5 data: { 6 message: 'Hello Vue!' 7 } 8}) 9
↑ このままだとVue本体も含まれてしまうので
module.exports = { externals: { 'vue': 'Vue' } }
webpack.config.jsにexternalsを設定
投稿2017/12/13 02:59
総合スコア10
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/01 02:12