私は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 であり、うまく機能します。ただし、カスタムタイピングを動作させることはできません。何かご意見は?
宣言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> {
}
}
私の経験では、モジュール定義の外部で宣言されたエクスポートまたはインポートがある場合、定義ファイルはこのように失敗します。自動インポートでIDEを使用する場合は、注意してください!
今日も同じ問題がありました。
エクスポートされたインターフェイスをモジュール宣言の外側に貼り付けたことがわかりました。テンプレートとして使用したタイピングファイルには、ファイルの最後にプライベートインターフェイスがありました。
したがって、エクスポートされたインターフェースは、モジュール宣言の外側で宣言されました。これは、TypeScriptコンパイラナットを駆動します。
インターフェイスをモジュールの境界に移動すると、すべてが修正されました。