web-dev-qa-db-ja.com

型なしnpmモジュール用のTypeScriptカスタム宣言ファイル

私はReactというコンポーネントを shiitake という名前のコンポーネントを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 Codeに次のエラーが表示されます。

[ts]拡張のモジュール名が無効です。モジュール「shiitake」は、「d：/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js」にある型指定されていないモジュールに解決されますが、拡張することはできません。

消費側では、上記の宣言を使用しても（noImplicitAnyコンパイラスイッチがオンになっているため）同じエラーが引き続き発生します。

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

[ts]モジュール「しいたけ」の宣言ファイルが見つかりませんでした。 「d：/dev/foo/foobar.foo.Client.Web/node_modules/shiitake/dist/index.js」には暗黙的に「any」タイプがあります。

このタイプのモジュールの宣言ファイルを取得する標準的な理由は @types/ way であり、うまく機能します。ただし、カスタムタイピングを動作させることはできません。何かご意見は？

reactjstypescriptecmascript-6visual-studio-codetypescript2.0
33
tugberk

宣言declare module 'shiitake';はグローバルスコープ内にある必要があります。つまり、非モジュールのトップレベル宣言（モジュールは、少なくとも1つのトップレベルimportまたはexportを持つファイルです）。

モジュール内のdeclare module '...' { }形式の宣言は、拡張機能です。詳細については、 TypeScript Module Augmentation を参照してください。

したがって、このファイルは次のようになります。

declare module 'shiitake' {

    import * as React from 'react';

    export interface ShiitakeProps {
        lines: number;
    }

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

私の経験では、モジュール定義の外部で宣言されたエクスポートまたはインポートがある場合、定義ファイルはこのように失敗します。自動インポートでIDEを使用する場合は、注意してください！

2
Ed Staub

今日も同じ問題がありました。

エクスポートされたインターフェイスをモジュール宣言の外側に貼り付けたことがわかりました。テンプレートとして使用したタイピングファイルには、ファイルの最後にプライベートインターフェイスがありました。

したがって、エクスポートされたインターフェースは、モジュール宣言の外側で宣言されました。これは、TypeScriptコンパイラナットを駆動します。

インターフェイスをモジュールの境界に移動すると、すべてが修正されました。

2
Sergey Dryganets