TypeScriptcreate-nuxt-appでNuxt.js+Expressのプロジェクトは簡単に作ることができますが、それで作成したプロジェクトをTypeScript化してみました。TypeScript化の対応は、Nuxt.js側、Express側で別々となります。Express側はちょっと面倒なので、とりあえずNuxt.jsだけ先にやっておく、とかでも良いと思います。Nuxt.js+Expressプロジェクトの作成は下記で紹介しているexpress-templateを利用おり、今回の記事はそちらの前提の説明となります。2018/8現在の情報です。ところどころNuxt.js1の情報が混じっていますので、下記も合わせて確認が必要な箇所があります。Nuxt.jsのプロジェクトをNuxt.js2にバージョンアップしてみたNuxt.js側をTypeScript化する基本的には、create-nuxt-appのtypescript-templateで実装されているものを参考にしています。Nuxt.jsTypeScript関連をインストールとりあえずTypeScriptをインストールします。protected]ts-loaderは3.5.0のバージョンを指定します(Nuxt.js2の場合は4)。無指定だとこのプロジェクトに合わないバージョンが入ってエラーになってしまいます。あとはNuxt.jsとVueをTypeScriptと連携させるライブラリも入れておきます。リポジトリから、下記のファイルをそのままコピーしてきます。index.d.tstsconfig.jsonmodules/typescript.jsそして、nuxt.config.jsのmodulesに"~/modules/typescript.js"を追加しておきます。基本的にはこれで完了です。あとは実際に各コンポーネントをTypeScriptにしていくだけです。VueコンポーネントをTypeScript化するとりあえず簡単なコンポーネントのサンプルです。JavaScriptのままでも動きますので、必要なコンポーネントから順次TypeScriptに変更していくことも可能です。}}</script>scriptタグscriptタグはlang="ts"を追記します。Vueクラスを使うJavaScriptの場合はオブジェクトをexportしていましたが、TypeScriptの場合はclassを使うため、Vueクラスを継承したクラスを作成してそれをexportします。{Componentデコレータを使うTypeScriptの場合は、クラス内にコンポーネントの設定を行うのではなく、@Componentデコレータを追加してそちらに設定を追加します。}})ステートはプロパティとして定義コンポーネントが保持するステートはdataメソッドを使う必要がなく、直接クラスのプロパティとして定義します。配列やオブジェクトの場合は型を指定しておかないとメソッド内で使う場合にエラーになったりします。Item;プロパティはPropを使う呼び出し元から渡されるVueコンポーネントのプロパティは@Propを使ってクラスのプロパティとして定義します。@Propは@Prop(Number)のようにもできますし、色々と指定方法があります。メソッドはクラスのメソッドその他はだいたい一緒です。メソッドはクラスのメソッドになるため、カンマ等で区切る必要はありません。Express側をTypeScript化するExpress側はちょっと面倒なので、気分が乗ったらやる、くらいの感じでも良いかも知れません。シンプルなルーティングの処理がメインだと恩恵も少ないかもしれません。そもそも開発時とリリースビルド時でも処理が異なるため、両方で動かせるように気をつけながら対応していく必要があります。色々な方法がありそうだったため、拘る人は自分で色々と調べて実装してみたほうが良いかも知れません。今回はとりあえずやってみて動いた方法を紹介します。ちなみに本番環境の手順については、一応ローカルでは動いていますが実際の本番環境では未構築のためまだ何か問題が出る可能性もありますのでご注意ください。何か見つかり次第等記事に追記していきます。前述のテンプレートだと、開発時はnodemonを利用してサーバーを起動&ホットリロードを実現しています。開発時はある程度適当でも問題ないと思いますので、nodemonでts-nodeを使えるようにします。ts-nodeというのはNodeのスクリプトを実行する時に、直接TypeScriptを実行できるようにするコマンドです。ts-nodeを設定ts-nodeの設定は下記を参考にしました。TypeScriptでサーバーサイドを開発している時に、コードを編集したら自動リロードさせる。ts-nodeをインストールします。ts-nodenodemonでtsファイルを使えるように設定ファイルを追加します。server/index.tsのように拡張子を変更します。あとはserver/index.jsの拡張子をtsに変更すればOKです。基本的にはこれでdevスクリプトは動くと思うのですが、他の各ファイルのグローバルな場所で同じ変数(router等)が定義されているとエラーになってしまうようなので、クラス化したり変数名を変えるか、下記のようにファイル全体を中括弧で囲んでおくかします。router);}他のファイルもTypeScript化するその他のルーティング用ファイルなども、基本的には拡張子をtsに変更すれば動きます。server/index.tsからそれらの読み込む場合などに、拡張子の指定が必要になります。あとは定義されていない変数などを使用するとエラーとして検出してくれたりしますので、使っていない処理などがあってエラーになってしまう場合は適当に修正しておいてください。オブジェクトも適当なプロパティを途中で追加したりするとエラーになりますので、変数を定義する場合にany等をつけておいてください。req.params.keyword;本番ビルド用の設定そのままビルドするとtsファイルの横に大量にjsファイルが作られてしまうため、適当にフォルダを作ってそちらにビルドされるようにします。"./dist"あとは設定ファイルやpackage.jsonも上記フォルダに無いとエラーになってしまうため、スクリプトを作ってコピーするようにしておきます。`dist/${path}`);});あとはtsファイルのトランスパイル、コピースクリプトの実行を実行し、トランスパイルされたjsファイルを実行するようにビルド&起動スクリプトを変更します。dist/server/index.js",あと、本番ビルドのフォルダの関係でrequireやimportで.tsのように拡張子をつけている場合はエラーになるため、拡張子は削除しておきましょう。中身も変更しておきます。ファイルでTypeScriptが動かせるようになっていると思います。開発サーバー実行時にサーバー側のみに限りimportを行うとエラーになると思いますので、その場合はnodemon.jsonのスクリプトを下記の様に変更するとimportできるようになります。./server/index.ts"本番もざっと検証してみましたが、やはりtsconfigの方もcommonjsでないと動きませんでした。あと、postcss関連のエラーが出るようなのでNuxt1の場合はNuxt2にアップグレードが必要です。参考Nuxt.jsのプロジェクトをNuxt.js2にバージョンアップしてみたまとめまだ開発中のプロジェクトで試した方法を投稿しただけになりますので、場合によってはうまく動かないパターンなどが出るかもしれません。何か見つかり次第また追記していきます。未定義の変数を使う場合はエラーになったりしますので、typoを減らしたりという効果はすぐ出そうです。ツイッターでシェアみんなに共有、忘れないようにメモマシュマロでメッセージか投げ銭?だら@Crieit開発者Crieitの開発者です。LAMPで開発しているWebエンジニアです(在宅)。記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。Vue等色々https://torima.appllis.net/users/dala00Crieitは個人で開発中です。どんな軽い内容でも嬉しいです。