他のプロジェクトのWebpackでtypescriptをコンパイル

Question

TypescriptプロジェクトをTSコンパイルにコンパイルするには、どうすれば他のTSプロジェクトにインポートして型定義を使用できますか？下位互換性のために、私は純粋なJSとしてそれらをエクスポートしたいので、TSを使用しない他の人もプロジェクトを使用することができます。

Answer 1

プロジェクトをnpmパッケージとして公開する必要があります。必要に応じてnpmにプライベートパッケージを作成することができます（ただし有料アカウントが必要です）。公開することもできますし、基本的にnpmのローカルインスタンスであるsinopiaを使用することもできます。

これらのオプションのいずれかを使用するには、プロジェクトの依存関係を指定する最新のpackage.jsonファイルが必要です。

あなたはコンパイル済みのフォームでパッケージを公開します。したがって、tsconfigとpackage.jsonを適切に指定すると、jsファイルをd.tsとともにエクスポートします。ファイルとパッケージは、typescriptまたはvanilla javascriptのいずれかで使用可能になります。

Answer 2

これは私がそれをやった方法です：

// package.json 
// The property name: @my-org/... means that the package is scoped - 
// you can point a @scope at a specific NPM registry. 
// See https://docs.npmjs.com/misc/scope 
// We use myget.org to host our private packages. 
{ 
    "name": "@my-org/ng-lib", 
    "version": "1.0.8", 
    "main": "dist/index.js", 
    "scripts": { 
    "transpile": "tsc --outDir ./", 
    "clean": "rimraf ./services && rimraf ./*.js && rimraf ./*.d.ts" 
    }, 
    "author": "*** <me@my-org.com>", 
    "license": "ISC", 
    "files": [ 
    "**/*.js", 
    "**/*.d.ts" 
    ], 
    "typings": "index.d.ts", 
    "dependencies": { 
    "@types/angular": "^1.5.20", 
    "angular": "^1.5.9" 
    }, 
    "devDependencies": { 
    "rimraf": "^2.5.4" 
    } 
} 

EDIT：

お知らせ"タイピング"： "index.d.ts"ライン？これはパッケージの主要な "types"ファイルを記述します。したがって、import *を「@ my-org/ng-lib」からngLibとして実行すると、intellisenseにはnode_modules /@my-org/ng-lib/index.d.tsの入力が使用されます。あなたが手でindex.d.ts、あなたが持っているすべてを作成した場合のWebPACKだからnode_modules/@my-org/ng-lib/dist/index.js

でjsのメインファイルを見つけますエクスポートするには、インタフェースは実装されておらず、オブジェクトの形状を記述するだけなので、そのインデックスの入力フィールドをポイントできるインターフェイスです。

しかし、ロジックを持つオブジェクト（メソッド、ゲッター/セッターなど）を持っている場合は、それらはおそらくクラスであり、.jsファイルと.d.tsファイルに変換する必要があります。

例：

./index.ts # Re-exports both my-class and my-interface 
./my-class.ts # Implements my-interface.d.ts 
./my-interface.d.ts 

"型付け" NPMパッケージには次のようtranspileがあるべき後にこののこの出力：

./index.d.ts 
./index.js 
./my-class.js 
./my-class.d.ts 
./my-interface.d.ts 

そしてpackage.jsonは以下の行が含まれます：

"main": "./index.js", 
"typings": "./index.d.ts", 
"files": [ 
    "./index.d.ts", 
    "./index.js", 
    "./my-class.js", 
    "./my-class.d.ts", 
    "./my-interface.d.ts" 
    ] 

...パッケージ（それは別のプロジェクトで公開され、インストールされています後）は、次の方法で行うことができます。

import * as ngLib from '@my-org/ng-lib' 
import { MyClass } from '@my-org/ng-lib' 
import { MyInterface } from '@my-org/ng-lib' 
import { MyClass } from '@my-org/ng-lib/my-class' 
import { MyInterface } from '@my-org/ng-lib/my-interface' 

のEND EDIT

はtsconfig.jsonで宣言プロパティは.d.tsファイルを出力しますエクスポートされたオブジェクトの「シェイプ」を記述します。

// tsconfig.json 
{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "sourceMap": false, 
    "emitDecoratorMetadata": true, 
    "declaration": true, 
    "experimentalDecorators": true, 
    "removeComments": true, 
    "noImplicitAny": false, 
    "suppressImplicitAnyIndexErrors": false, 
    "baseUrl": "./src", 
    "listFiles": true, 
    "noImplicitUseStrict": false 
    }, 
    "exclude": [ 
    "node_modules" 
    ] 
} 

そして、それは複雑なパッケージだ場合、私は別のモジュールがありますので、同じようindex.tsでそれらを集約：

// index.ts 
export * from './module-one' 
export * from './module-two' 
export * from './module-three' 

ます。また、サブディレクトリを持つことができ、それぞれが自分自身でインデックス。

これは、次のを可能にする、index.jsとindex.d.tsファイルの両方を作成します。

import * as ngLib from '@my-org/ng-lib' 
import { ModuleOne } from '@my-org/ng-lib/module-one' 
import { SubModuleOne } from '@my-org/ng-lib/submodules/submodule-one'