web-dev-qa-db-ja.com

TypeScriptのカスタムグローバルインターフェイス（.d.tsファイル）を構成する方法は？

私はこの数時間、この問題に苦労してきましたが、インターネット上で、おそらくこの単純な概念を明確に説明するものを見つけることができないようです。

現在、Webpack2とTypeScriptを使用するReactJSプロジェクトに取り組んでいます。すべてが1つのこととは別に完全に機能します。自分で作成したインターフェイスをアプリケーション全体に表示されるように別々のファイルに移動する方法を見つけることはできません。

プロトタイピングの目的で、最初はそれらを使用するファイルで定義されたインターフェイスを使用していましたが、最終的には複数のクラスで必要なインターフェイスを追加し始め、すべての問題が発生しました。 tsconfig.jsonにどのような変更を加えても、ファイルをどこに置いてもIDEとWebpackはどちらも名前を見つけられないという不満を言います（Could not find name 'IMyInterface'）。

現在のtsconfig.jsonファイルは次のとおりです。

{
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "typeRoots": [
      "./node_modules/@types",
      "./typings"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "types": [
    "typePatches"
  ]
}

ご覧のとおり、私のtsconfig.jsonはプロジェクトディレクトリのルートにあり、すべてのソースは./srcにあり、カスタム.d.tsファイルを./typingsに配置して、 typeRoots。

TypeScript 2.1.6および2.2.0でテストしましたが、どちらも動作しません。

すべてを機能させる1つの方法は、typingsディレクトリをsrcに移動してからimport {IMyInterface} from 'typings/blah'に移動することですが、使用する必要がないので適切ではありません。これらのインターフェイスは、アプリケーション全体で「魔法のように」利用できるようにしたいだけです。

編集：サンプルapp.d.tsファイルは次のとおりです。

interface IAppStateProps {
}

interface IAppDispatchProps {
}

interface IAppProps extends IAppStateProps, IAppDispatchProps {
}

それらをexportまたは多分declareする必要がありますか？名前空間でラップする必要はありませんか？！

typescripttypescript-typingstypescript2.0typescript1.8
46
Andris

「Magically available interface」またはグローバルタイプは非常に推奨されておらず、ほとんどはレガシーに委ねるべきです。また、作成しているコードにアンビエント宣言ファイル（d.tsファイルなど）を使用しないでください。これらは、外部の非TypeScriptコードの代わりに使用することを意図しています（本質的にTypeScriptタイプをjsコードに入力して、javascriptとよりよく統合できるようにします）。

作成するコードについては、プレーン.tsファイルを使用してインターフェイスとタイプを定義する必要があります。

グローバルタイプは推奨されませんが、問題に対する答えは、TypeScriptには.tsファイルの2つのタイプがあるということです。これらはscriptsおよびmodulesと呼ばれます。

script内のすべてのものはグローバルになります。したがって、スクリプトでインターフェイスを定義すると、アプリケーション全体でグローバルに使用可能になります（スクリプトが///<reference path="">タグ、またはfiles:[]またはincludes:[]を介してコンパイルに含まれている場合、または**/*.tsのデフォルトtsconfig.json。

他のファイルタイプは「モジュール」であり、module内のすべてはモジュールに対してプライベートです。モジュールから何かをエクスポートする場合、他のモジュールがそれをインポートすることを選択した場合、他のモジュールで使用できます。

.tsファイルを「スクリプト」または「モジュール」にするものは何ですか？ええと...ファイルのどこかでimport/exportを使用すると、そのファイルは「モジュール」になります。 import/exportステートメントがない場合、それはグローバルスクリプトです。

私の推測では、あなたが宣言でimportまたはexportを誤って使用し、それをモジュールにして、すべてのインターフェイスをそのモジュール内でプライベートにしたと思います。それらをグローバルにしたい場合は、ファイル内でimport/exportステートメントを使用していないことを確認してください。

98
dtabuenc