在angular2中使用html2canvas Typescript應用程序獲取錯誤

Question

我想在我的Angular2應用程序中實現打印功能。我遇到了這個包html2canvas。它看起來令人印象深刻，但是當我試圖將它包含在我的應用程序中時，它會拋出一個錯誤。

這裏是我的腳步，我也跟着

1. 從here下載js文件
2. 新增<script src="scripts/html2canvas.js"></script>
3. 在TS文件中聲明declare var html2canvas: any;

4. 添加代碼打印（當用戶點擊打印按鈕 - 測試代碼）

   printview(): void { html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); }); }

，但只要用戶點擊打印按鈕我得到以下錯誤

browser_adapter.ts:78 ReferenceError: html2canvas is not defined

任何幫助或提示將是有益的......

Answer 1

打字稿需要定義以識別VanillaJS框架。

認爲它這樣，打字稿依賴於它爲了鑑定對象富人的TS文件，html2canvas包含在你的HTML，但打字稿現在已經確定html2canvas對象的方式。

可能的解決方案：

---

最佳：

升級到打字稿2 *，並使用新的 'typeRoots' 和 '類型' 字段。

按照以下步驟升級到TS 2.0+

npm i @types/html2canvas

後更新 'tsconfig.json' 文件，像這樣：

{ "compilerOptions": { // your options, "typeRoots": [ "./node_modules/@types" ], "types": [ "html2canvas" ] } }

---

可接受：

手動下載定義文件（不推薦，因爲您需要通過手動獲取最新版本來維護每個更新的定義）。

---

快速和骯髒的：

創建「references.d。TS'在你的根文件夾（旁邊tsconfig.json）文件，並寫入以下內容：

declare var html2canvas: any;

通過這樣做，transpiler會知道你作爲一個編碼器都知道的‘html2canvas’的存在，所以它不會把它看成一個錯誤（與本次重大缺點‘解決方案’是，你必須爲圖書館所以基本上你只是盲目編寫代碼沒有IntelliSense支持。

---

所以對於一個堅實的項目我推薦最好的解決方案，如果您只是爲了測試目的而玩TS，其他任何解決方案都可以。

如果您想了解更多關於新類型屬性包含在TS2，讀這個其他問題的答覆：

Typescript 2.0. "types" field in tsconfig.json

當然和參考文檔：

https://www.typescriptlang.org/docs/handbook/compiler-options.html