Typescript別のtsファイルをインポートするためのモジュールシステムVisual Studio 2015 Update 3

Question

Visual Studioでは、既定のapp.tsファイルで宣言されたいくつかのクラスを持つTypescriptプロジェクトを作成しました。さて、これらのクラスを別々の.tsファイルに分けてみたいと思います。私はどのモジュールロードシステムがこのプロジェクトタイプに推奨されているのかを理解するのが難しいです。

私は、エクスポートテスト型宣言で新しいTest.tsファイルを追加しました：待って、私はasyc /ための構文を使用できるように、私はES6を選択した

：

export class Test { 

} 

戻って私のapp.tsで私は、このタイプのインスタンスを作成しています：

私はChromeで解決策を実行したときに、私は次のコンソールメッセージを取得、今

import {Test} from "Test"; 

：

window.onload = async() => { 
    let test = new Test(); 
} 

Visual Studioは、それ用のインポートを追加して提供しています

Uncaught SyntaxError: Unexpected token import 

を私はクロームを実現します「インポート」に対応していません。誰かが、このVS 2015環境でどのようにインポートを行うことができるかを提案することができます。別のモジュールシステムを使用する必要がありますか？そうであれば、別々の.tsファイルを読み込むサポートをどのように追加するのですか？

編集： 私はこの構文を使用した例を見てきました：

/// <reference path="Test.ts" /> 

を、それはタイプを解決-時間をコンパイルする動作しませんし、私はそれが推奨されないアプローチである集まります。

私はChromeでソース]タブを見ても、私は私が私のソースからのtranspilationだと思うものを見ることができます（ES5？）：

window.onload =() => __awaiter(this, void 0, void 0, function*() { 

が、私はまた、「クラス」キーワードを参照してください私は期待していなかったので、なぜ特定の変換が起こっているかどうかは私が正確にはわかりません。すなわち__awaiter（サポート）への非同期（async）、クラス（transpiledおよびサポートされていない）、インポート（変換されないとサポートされていません。）

編集 私はwebpack.config.jsを使用してproject

を追っ：

module.exports = { 
    entry: './src/app.ts', 
    output: { 
     filename: './dist/bundle.js' 
    }, 
    resolve: { 
     // Add `.ts` and `.tsx` as a resolvable extension. 
     extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'] 
    }, 
    module: { 
     loaders: [ 
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` 
      { test: /\.tsx?$/, loader: 'ts-loader' } 
     ] 
    } 
} 

が、私はimport文をそのままコピーして、ブラウザが理解ローダにES5出力に変換されていない同じ問題があるようです：

を3210

import {Test} from "./Test"; 

Answer 1

正しい軌道に乗って私を置くためのブルーノに感謝します。私の別の.tsファイルを単一のES5 jsファイルに変換できるのは、babel-loaderを追加することでした。

node_modulesにそれをインストールして最初に：

npm install babel-loader 

そして、私のtsconfig.jsファイルにローダの参照を追加：

今

module.exports = { 
    entry: './src/app.ts', 
    output: { 
     filename: './dist/bundle.js' 
    }, 
    resolve: { 
     // Add `.ts` and `.tsx` as a resolvable extension. 
     extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'] 
    }, 
    module: { 
     loaders: [ 
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` 
      { test: /\.tsx?$/, loader: 'ts-loader' }, 
      { test: /\.js$/, loader: "babel-loader"} 
     ] 
    } 
} 

は、TSファイルでimport文がにtranspiledされていますベベルローダーシンタックス