網站搜尋

angular - 如何在 TypeScript 專案中調用 JavaScript 庫?


我正在處理一個現有的 TypeScript AngularJS 專案。現在我想使用 d3js,但要這麼做我需要手動下載 d3js 的 TypeScript(結果發現 d3 由數百萬個檔案組成)然後再下載 d3js 的最小化 JavaScript。公司的代理伺服器不允許我使用工具來下載或管理依賴項,因此我只能手動操作。

因此,我更傾向於直接在 index.html 中引入 d3js,並從 TypeScript 直接調用 d3js,而不使用 d3 的 TS 版本。

所以我舉例。

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.05)
    .align(0.1);

但是然後我得到編譯器錯誤「找不到名稱 d3」,有沒有辦法在 TypeScript 中告訴它這個 JavaScript 對象是在其他地方定義的,並且它不應該對其假設任何東西?

可惜的是 d3 js 被拆分成了無數部分……我覺得它不是很有用,誰會在沒有 select 的情況下使用 d3 scale?這對我來說毫無意義。

答案#1

定義檔僅在將 ts 源碼編譯為 js 時需要,執行 js 時不需要。

使用 @types 會是最簡單的方式:

npm install --save @types/d3

如果你無法做到這一點,那麼請手動下載定義檔,並將其放在你的來源附近,然後引用它:

/// <reference path="PATH_TO_D3_D_TS" />

如果你也做不到那個的話,就宣布它:

declare const d3: any;

這將告訴編譯器變數 d3 存在,並且它的類型是 any,因此使用它不應該會出現異常。