SourceChordスマートフォン用の表示で見るSourceChordC#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。Studio(RC2)では、JavaScript用にはExpress4のテンプレートが用意されてますが、TypeScript用にはExpress3のテンプレートしか用意されていません。ことで、TypeScript用にExpress4のプロジェクトを作る手順の備忘録です。以下の手順では、npmで、express-generatorとtsdがインストール済みの状態として書いてます。適当なフォルダでコンソールを開き、express-generatorを使って雛形を生成します。-e自分は普段ejsを使ってるので、-eオプションを付けて、ejsを使用する雛形を生成しました。Application」を選び、プロジェクトを作成します。code」というテンプレートがありますが、これを使うと、JavaScriptのプロジェクトとなってしまうので、普通にTypeScriptの新規のプロジェクトとして作ります。雛形コードのコピープロジェクトを作ったら、先ほどexpress-generatorで生成された雛形を、作ったプロジェクトの中にコピーします。package.jsonは上書きコピーしてしまいます。VSで作ったプロジェクトではjsではなくtsを使用するので、雛形のapp.jsのコードを、app.tsにコピーします。コピーしたファイルをソリューションに含めるソリューションエクスプローラからbin/public/routes/viewsのフォルダを選び、右クリックメニューで「プロジェクトに含める」としておきましょう。スタートアップ・ファイルの設定express-generatorで生成された雛形は、bin/wwwに書かれているスクリプトを、スタートアップ用のファイルとして指定する必要があります。いうことで、プロジェクトのプロパティで、スタートアップファイルの設定を行います。以下のプロパティも設定して、実行時にブラウザを自動的に開くようにしましょう。ここでは、起動時に指定するポートは3000としています。(この値は、先ほどのbin/wwwの中で書かれています。)依存パッケージのインストールこのままでは必要なパッケージがインストールされてません。Packages」というのを実行し、依存パッケージのインストールをします。TypeScript用の型定義ファイルの用意tsdを使って型定義ファイルを取得します。tsdでそのまま型定義のインストールをすると、tsd.jsonなどのある場所と同階層にtypingsフォルダを作り、その中に各ライブラリの型定義ファイルをインストールしていきます。VSで作成したプロジェクトファイルでは、Script/typingsディレクトリ配下に型定義ファイルをインストールするので、この形になるように、tsd.jsonファイルを修正して使います。tsd.jsonを作ります。プロジェクトファイルのあるディレクトリでコンソールを開き、以下のコマンドを実行します。initここで作られたjsonファイルを少し修正します。pathとbundleの項目を追加/修正し、Scripts/typingsディレクトリ以下で型定義ファイルを管理するようにしています。{}}そして、以下のコマンドでexpressの型定義ファイルをインストールします。install(この時、元々あったnode.d.tsファイルも更新されます。NTVSのプロジェクトで用意される型定義ファイルは、v0.10向けのファイルですが、最新版を取ってくると、v0.12向けの型定義ファイルがインストールされます。)この手順で追加された型定義ファイルも、ソリューションエクスプローラの右クリックメニューから、プロジェクトに含めておきましょう。雛形をそのまま持ってきただけでは、TypeScriptのコンパイルでエラーが出る箇所があります。ビルドできるような最小限の修正は以下の一か所。30行目のError型のオブジェクトを作ってる部分を以下のようにany型として受けるように修正します。Found');よりTypeScriptらしく書くのであれば、以下のようにrequireを呼ぶところでimportで受けたり、関数定義部分で型を指定したりします。favicon/logger/cookieParser/bodyParserの部分はvarで受けています。この辺もimportで受けたい場合は、それぞれ対応するライブラリの型定義ファイルをtsdで取ってくればよさそうです。(ただし、この辺のモジュールはapp.useに突っ込んでるだけで、あまり型定義の必要性を感じなかったのでそのままにしてます。)修正したコードは以下の通り。app;index.js/user.jsも、TypeScriptの○○.tsというファイルを作り、それぞれ以下のようなコードにします。router;元からあった○○.jsファイルの拡張子を変えて使う場合は、ビルドアクションがTypeScriptCompileになっていることを確認しておきましょう。(ここがCompileのままだと、TypeScriptとしてコンパイルされません。以上の手順をやると、以下のような構造のプロジェクトが出来上がります。実行してみると、こんな風にExpressの雛形のページが表示されるようになります。アプリ開発Windows開発者はてなブログをはじめよう!minami_SCさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。