2016-12-14 60 views
0

我有一個外部JS庫全局參數:如何在定義文件中定義全局TypeScript變量以便導入?

function Thing() { ... } 
... 
var thing = new Thing(); 

有一個打字稿定義文件,所以在thing.d.ts

declare var thing: ThingStatic; 
export default thing; 

export interface ThingStatic { 
    functionOnThing(): ThingFoo; 
} 

export interface ThingFoo { 
    ... and so on 

然後我導入我自己的TS文件這跟:

import thing from 'thing'; 
import {ThingFoo} from 'thing'; 
... 
const x:ThingFoo = thing.functionOnThing(); 

的問題是,transpiles到:

const thing_1 = require("thing"); 
... 
thing_1.default.functionOnThing(); 

這會引發錯誤。我問了一下,在another question和建議是使用:

import * as thing from 'thing'; 

這不能解決問題 - 它給了我在TS thing.default但隨後這是不確定的,一旦transpiled到JS。

我認爲thing.d.ts有什麼問題 - 必須有一種方法來定義可導入的類型化全局參數。

我應該如何編寫thing.d.ts以便正確表示JS,並且不會包含default或其他實際不存在的屬性?

+0

嘗試使用字符串名稱聲明 - '''聲明var'thing'。我並不真正理解_Why_這個作品,但我必須在稍微不同的情況下做同樣的事情。(在我的情況下,我從聲明模塊foo切換到聲明模塊'foo') – user1821052

回答

1

如果使用該庫的唯一方式是通過訪問它的全局變量(而不是將其導入爲節點模塊或amd或umd模塊),那麼最簡單的方法是在頂部沒有任何export s的聲明文件水平。只需聲明一個變量就足夠了。要使用它,必須在編譯打字稿代碼時包含該聲明文件,方法是將其添加到filesincludetsconfig.json中,或者直接在命令行上添加。您還必須在運行時在庫中包含<script>標籤。

實施例:thing.d.ts

declare var thing: ThingStatic; 

declare interface ThingStatic { 
    functionOnThing(): ThingFoo; 
} 

declare interface ThingFoo { 
} 

測試thing.ts

const x:ThingFoo = thing.functionOnThing(); 

可以一起

./node_modules/.bin/tsc test-thing.ts thing.d.ts 

結果被編譯在test-thing.js

var x = thing.functionOnThing(); 

另請參閱this question關於環境聲明。

注:有模塊裝載機在那裏,允許使用的全局庫,如果他們的模塊,所以它是可以使用的,而不是<script>標籤import聲明,但如何配置這些模塊加載器要做到這一點是另一個,更復雜題。

+0

這是行不通的。如果沒有'thing.d.ts'中的'export'語句,那麼'test-thing.ts'就不知道全局變量'thing'是什麼。環境聲明起作用,但首先破壞了具有'thing.d.ts'的所有要點,因爲現在一切都只是「任何」。這個全局變量是大API的入口 - 我希望定義對TypeScript可見。 – Keith

+0

沒有一切都是打字,而不是「任何」 - 你爲什麼說「一切都是一切」?如果它真的是全局變量,則無法導入它 - 您無法導入未通過模塊化JavaScript代碼導出的東西。聲明文件只是描述了在JavaScript庫中定義的現實,它不能更改它。 – artem

+0

這就是我嘗試使用這個時所得到的結果。我開始認爲這可能是Visual Studio中的一個錯誤。我會用替代實現來做一些測試。 – Keith