systemjsでインポートが正しく行われない

Question

クライアントとサーバーの両方に既存のjsライブラリ（validate.js）を使用しようとしています。

npmを使用してインストールしました。すべてがサーバーとクライアントの両方でコンパイルされます。
サーバーで使用するとうまくいきますが、ブラウザで実行するとエラーが発生します。

同じファイルが両方の場合に使用されます。

import validate = require("validate.js"); 

export function RequestValidator(data: any): any { 
    return (validate as any)(data, constraints, { allowEmpty: true }); 
} 

validateはbecuase anyにアサートされているそれ以外の場合は私が手：

TS2349：そのタイプのコールサインを欠い表現を呼び出すことはできません。

私が使用している.d.tsは次のとおりです。

declare module "validate.js" { 
    export interface ValidateJS { 
     (attributes: any, constraints: any, options?: any): any; 
     async(attributes: any, constraints: any, options?: any): Promise<any>; 
     single(value: any, constraints: any, options?: any): any; 
    } 

    export const validate: ValidateJS; 
    export default validate; 
} 

モジュールは、機能のみをエクスポートし、それがサーバーにうまく動作しますが、この関数を呼び出すとき、クライアントに私が取得：

"use strict"; 
const validate = require("validate.js"); 
... 

：

Uncaught TypeError: validate is not a function(…) 

コードは、サーバのためのターゲットcommonjsを使用してコンパイルされています

とクライアントのためのsystem：

System.register(["validate.js"], function(exports_1, context_1) { 
    "use strict"; 
    var __moduleName = context_1 && context_1.id; 
    var validate; 
    ... 

    return { 
     setters:[ 
      function (validate_1) { 
       validate = validate_1; 
      }], 
    ... 

はそれをデバッグ、validateは確かにそれはだ関数ではありません。

validate: r 
    EMPTY_STRING_REGEXP: (...) 
    get EMPTY_STRING_REGEXP: function() 
    set EMPTY_STRING_REGEXP: function() 
    Promise: (...) 
    get Promise: function() 
    set Promise: function() 
    __useDefault: (...) 
    get __useDefault: function() 
    set __useDefault: function() 
    async: (...) 
    get async: function() 
    set async: function() 
    capitalize: (...) 
    get capitalize: function() 
    set capitalize: function() 
    cleanAttributes: (...) 
    get cleanAttributes: function() 
    set cleanAttributes: function() 
    ... 

に行くと、なぜそれがブラウザでこのように動作しているものすべてのアイデア？

Answer 1

あなたは"module": "system"でコンパイルすると、ノードと互換性のある輸入

import validate = require("validate.js"); 

は、もはや作品 - あなたがvalidateのためになっている値は、モジュール、関数ではなく。これはタイプスクリプトのバグかもしれませんし、設計上のバグかもしれません - わかりません。 （アップデート：JsonFreeman here宛てのgithubコメントから、それは設計上のようです：you get the module object with a set of properties including one named default）。

これを回避する方法はいくつかあります。

まず、あなたは簡単に変換を自分で行うことができます - あなたが必要とする機能は、モジュールのdefaultプロパティとして提供されているので、この行は、それを修正します。あなたものため"module": "commonjs"してコンパイルすることができます

validate = validate.default ? validate.default : validate; 

かを、ブラウザではtypescriptが作業コードを生成し、systemjsはモジュールのフォーマットを自動的に検出します。

それとも最後に、あなたはまだ"module": "system"でコンパイルしたが、それは、そのタイピングに意図されていますようvalidate.jsをインポートすることもできます

import validate from 'validate.js'; 

あなたがanyに任意のキャストを行う必要はありません、とtypescriptですが、必要に応じて生成されます。その方法defaultプロパティへのアクセスがありますが、欠点は、そのようにインポートされたときにノード内で全く機能しないことです。