9

我正在使用TypeScript從我的項目中消耗一個名爲shiitake的React組件。該庫沒有TypeScript聲明,所以我想我會寫一個。聲明文件看起來像下面的(也可能是不完整的,但不用擔心太多):無類型npm模塊的TypeScript自定義聲明文件

import * as React from 'react'; 

declare module 'shiitake' { 

    export interface ShiitakeProps { 
     lines: number; 
    } 

    export default class Shiitake extends React.Component<ShiitakeProps, any> { 
    } 
} 

我已經把這個裏面./typings/shiitake.d.ts文件和VS的代碼,我看到下面的錯誤:

[ts] Invalid module name in augmentation. Module 'shiitake' resolves to an untyped module at 'd:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js', which cannot be augmented.

在消費方面,我仍然得到同樣的錯誤,即使上述聲明(因爲我有noImplicitAny編譯器開關打開):

/// <reference path="../../../../typings/shiitake.d.ts" /> 
import * as React from 'react'; 
import Shiitake from 'shiitake'; 

[ts] Could not find a declaration file for module 'shiitake'. 'd:/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js' implicitly has an 'any' type.

標準爲什麼要獲取這種類型的模塊的聲明文件是通過@types/ way,它運作良好。但是,我無法獲得定製打字工作。有什麼想法嗎?

回答

26

申報declare module 'shiitake';應該在全局範圍內。即非模塊中的頂級聲明(其中模塊是具有至少一個頂級importexport的文件)。

模塊中declare module '...' { }表單的聲明是擴充,請參閱https://github.com/Microsoft/TypeScript-Handbook/blob/fa9e2be1024014fe923d44b1b69d315e8347e444/pages/Declaration%20Merging.md#module-augmentation以獲取更多詳細信息。

所以,你要這個文件看起來像:

declare module 'shiitake' { 

    import * as React from 'react'; 

    export interface ShiitakeProps { 
     lines: number; 
    } 

    export default class Shiitake extends React.Component<ShiitakeProps, any> { 
    } 
} 
+0

哇,非常感謝。你是一個節省時間的人 – smac89

+3

這是一個很大的幫助,謝謝。對我來說,問題是'import'語句不在模塊之外,而是在內部。 – dbellizzi

+0

我希望我能像這樣十次提高這個數字。昨天我花了幾個小時。我真的希望TypeScript文檔對此更好。 –

0

今天我有同樣的問題。

原來我在模塊聲明之外粘貼導出的接口。 我用作模板的打字文件在文件末尾有專用接口。

所以我的導出接口聲明在模塊聲明之外。 這是驅動器打字稿編譯器的堅果。

一旦我將接口移入模塊邊界,一切都得到了修復。

0

根據我的經驗,如果定義文件在模塊定義之外聲明瞭任何導出或導入,則定義文件將以此方式失敗。如果您使用自動導入的IDE,請注意!

相關問題