web-dev-qa-db-ja.com

TypeScriptインターフェイスをノードモジュールからエクスポートするにはどうすればよいですか？

それを考え出した！

最初は、次のようにモジュールをインポートしようとしました。

const qml = require('quill-marking-logic')
const { checkSentenceCombining, checkSentenceFragment, checkDiagnosticQuestion, checkFillInTheBlankQuestion, ConceptResult } = qml

TS2307: Cannot find module 'quill-marking-logic'使用しようとしたときのエラー

import { checkSentenceCombining, checkSentenceFragment, checkDiagnosticQuestion, checkFillInTheBlankQuestion, ConceptResult } from 'quill-marking-logic'

これは私が"module": "es6"インポートアプリのtsconfigで、デフォルトでmoduleResolutionオプションをClassicに設定します。明示的にnodeに設定することで、import構文を使用してインターフェイスを取得できました！

元の投稿

TypeScriptを使用して、別のアプリの依存関係として使用しているノードモジュールを構築しました。他のアプリで使用できるように、エントリポイントからエクスポートしようとしているモジュールにいくつかのインターフェイスがありますが、それらはコンパイル後に消去されます。インターフェイスはランタイム分析に使用されるため、これはTypeScriptの設計の一部であることを理解していますが、他のアプリで再度定義して維持する必要がないため、それを回避する方法があるかどうか迷っています。 2つの場所で同じコード。バンドラーとしてロールアップを使用しています。

これは、私のエントリポイントの.d.tsバージョンです。

export { checkSentenceCombining } from './libs/graders/sentence_combining';
export { checkDiagnosticQuestion } from './libs/graders/diagnostic_question';
export { checkSentenceFragment } from './libs/graders/sentence_fragment';
export { checkFillInTheBlankQuestion } from './libs/graders/fill_in_the_blank';
export { Response, PartialResponse, ConceptResult, FocusPoint, IncorrectSequence, FeedbackObject, GradingObject, WordCountChange } from './interfaces/index';

エクスポートの最後の行は、インターフェースが通過する場所です。

ここに私のtsconfigがあります：

{
    "compilerOptions": {
        "target": "es5",
        "module": "CommonJS",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "sourceMap": false,
        "noImplicitAny": false,
        "lib": [
            "dom",
            "es7"
        ],
        "typeRoots": [
            "node_modules/@types/"
        ],
        "declaration": true
    }
}

これをインポートしようとしているアプリのtsconfigは次のとおりです。

{
    "compilerOptions": {
        "outDir": "./dist/",        // path to output directory
        "sourceMap": true,          // allow sourcemap support
        "strictNullChecks": true,   // enable strict null checks as a best practice
        "module": "es6",            // specifiy module code generation
        "jsx": "react",             // use TypeScript to transpile jsx to js
        "target": "es6",            // specify ECMAScript target version
        "allowJs": true,            // allow a partial TypeScript and JavaScript codebase
        "lib": ["ES2017", "DOM"],            //
        "allowSyntheticDefaultImports": true // Allow import React from 'react'
    }
}

そして、package.jsonの「typings」キーで生成された.d.tsファイルを指しています。

node.jstypescriptnode-modulesrollupjs
7
E. Friedberg

はい、可能です。これを行うには、exportモジュールのエントリポイントファイルでモジュールのコンシューマーが利用できるようにするインターフェースを指定します。

// in entry.ts
import { MyInterface1 } from '/path/to/interface/one';
import { MyInterface2 } from '/path/to/interface/two';

export { MyInterface1, MyInterface2 };

次に、このモジュールを使用するコードで、次のことができます。

import { MyInterface1, MyInterface2 } from 'my-module`;

これが機能するためには、モジュールでdeclarationコンパイラオプションがtrueに設定されていることを確認する必要があります。これにより、コンパイラは.d.tsファイルを出力します。モジュールのタイプ情報が含まれています。

パズルの最後のピースは、この.d.tsファイルを指すtypesプロパティをモジュールの「package.json」に含めることです。

{
    "name": "my-module",
    "main": "./entry.js",
    "types": "./my-module.d.ts"
}

公開用のモジュールの準備の詳細については、次のとおりです。 https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html

4
Nathan Friend

これをtsconfig.jsonファイルに追加します。

"allowJs": false,
"declaration": true,

これをpackage.jsonファイルに追加します。

"types": "dist/index.d.ts",

また、d.tsファイルをpackage.jsonで公開する別のフォルダに配置することを忘れないでください。そうしないと、ファイルが失われます。たとえば、typingsフォルダーの横のsrcフォルダーに入れて、これをpackage.jsonに追加します。

  "files": [
    "/dist",
    "/typings"
  ],

詳細： https://medium.com/cameron-nokes/the-30-second-guide-to-publishing-a-TypeScript-package-to-npm-89d93ff7bccd

0
Klas Mellbourn

モジュールの--declarationファイルを生成するには、d.tsオプションを使用する必要があります。定義ファイルにはエクスポートされたインターフェースが含まれ、アプリケーションで使用できます。

TypeScriptが定義を検索する場所 in にモジュールと一緒に定義ファイルを含める必要があります。

同様に、非相対インポートはNode.js解決ロジックに従い、最初にファイルを検索し、次に適切なフォルダーを検索します。したがって、ソースファイル/root/src/moduleA.tsの「moduleB」から{b}をインポートすると、次のルックアップになります。

/root/src/node_modules/moduleB.ts
/root/src/node_modules/moduleB.tsx
/root/src/node_modules/moduleB.d.ts
/root/src/node_modules/moduleB/package.json (if it specifies a "types" property)
/root/src/node_modules/moduleB/index.ts
/root/src/node_modules/moduleB/index.tsx
/root/src/node_modules/moduleB/index.d.ts
0
Titian Cernicova-Dragomir