SymfonyのAssetとして利用されます。コントローラにアクションを追加し、トランスパイルされたソースをtwigから参照してみます。開くと結果が確認できます。angular-ui-routerangularJSの型をインストールTypeScriptからJavaScriptのパッケージを利用する場合、パッケージ内のオブジェクトや関数などの型情報を参照する必要があります。使ってnpmからインストールできるようになったため、これを使って型情報をインストールします。@types/jqueryangularJSのアプリケーションを定義angularJSのアプリケーションを書いてみましょう。いうルーティングを定義し、それぞれのページを行き来するだけの簡単なサンプルアプリケーションです。buildブラウザをリロードすると結果が確認できます。これらのファイルはnpm-scriptsにより再作成されます。ファイルの監視をするnpm-scriptsソースコードを変更する度にビルドするのは面倒なのでnpm-scriptsとして登録しておきます。watch先に書いたようにビルド結果はSymfonyのAssetとして利用されるため、こちらも監視しておくと便利です。ルートディレクトリからの実行さきほどから以下のディレクトリ移動が何度も出てくるのにお気づきでしょうか。[path/to/project]/src/AppBundle/Resources/npmフロントエンドのソースコードをバンドルごとにnpmで管理する利点としてバンドルごとにビルドやインストールが行えるインストールが高速などが挙げられますが、インストールの度にディレクトリ移動するのが面倒です。紹介していますが、Symfonyプロジェクトのルートディレクトリからnpmコマンドを実行するパッケージを改めて紹介します。コマンドが使えるようになります。使用して各バンドルのnpmコマンドを実行するため、npmをインストールしておきます。npm実際にコマンドを使ってみましょう。ようにプロジェクト全体で一括処理したいnpm-scriptsを定義しておくと便利ですね。テスト最後にユニットテストを実行してみましょう。テストするためのコンポーネントテストする対象として簡単なangularJSのコンポーネントを作成します。使ってwebpackでビルドしたファイルをテストするように設定します。--no-single-run"コンポーネントのテストテスト自体はJavaScriptで書く方法と同じですが、型指定が増えた分コード量が多く見えます。});});テストを実行せっかくなのでルートディレクトリから実行してみましょう。completedおわりにTypeScriptを導入すると「console.log()しないと何が入っていたオブジェクトなのか思いだせない」状態から抜け出せます。次の世代のECMAScriptの構文を積極的に取り入れている言語でもあるので、先行して勉強できるメリットもあります。Symfonyと組み合わせて積極的に使っていきたいですね。今回のソースコードはgithubで公開しています。参考としてお使いください。TtskchTheme。