Nuxt.js v2.9.0のリリースノートにあるように、 v2.9.0 からTypeScriptが外部からのサポートになりました。以前からNuxtでTypeScriptを使うときは色々設定したり、 Lintまわりが複雑だったり、コーディングをはじめるまで時間がかかったものの、しばらくすると最新が変わってたり・・・。 今回は2019年11月時点で、Nuxt.js + TypeScriptと IntelliJ IDEA で使えるまでを紹介します。
Nuxtのプロジェクトを作る $ npx create-nuxt-app example よくこのコマンドを見ますが、最新の create-nuxt-app を使うためには、 yarn create nuxt-app を使ったほうががいいかもしれません。
$ yarn create nuxt-app example yarn create v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... info @google-cloud/functions-emulator@1.0.0-beta.5: The engine "node" is incompatible with this module. Expected version "~6". Got "10.13.0" info "@google-cloud/functions-emulator@1.0.0-beta.5" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] 🔗 Linking dependencies.
タイトルがわかりにくくて申し訳ないんですが、エディターがIntelliJで、Vue, NuxtをTypeScriptでコーディングする環境の際、 vue-class-component のNuxt版、 nuxt-class-component を使えばNuxtでTypeScriptでコーディングできるんですが、メソッド内で this.$route を参照する際に下記のように implements をつけます。
js 1
2
3
4
5
6
7
8
9
10
11
12
13
<script lang="ts"> import Vue from 'vue'; import {Route} from 'vue-router'; import Component from 'nuxt-class-component'; interface WithRoute { $route: Route; } @Component export default class Index extends Vue implements WithRoute { created() { console.log(this.$route.params); } } </script> そうすると、以下の画像のようなエラーが出ました。
最近Vue.jsを勉強してます。Nuxt v2が半年ほど前にアナウンスされ、先日ようやくリリースされました。良い機会なのでTypeScriptで開発できる環境構築をメモしておきます。Vueファイル内のHTMLはPug(Jade)にします。
Nuxt.js v2 TypeScript eslint nuxt-class-component Pug(Jade) Nuxt.js v2 setup vue cli を使うのでインストールしておきます
$ npm i -g vue-cli スターターテンプレートから始めます。Nuxtのインストールはこちらを参考にしてます。 https://ja.nuxtjs.org/guide/installation
$ vue init nuxt-community/starter-template example $ cd example $ yarn or npm i(以下yarn) これを書いてる現時点ではversionが 1.0.0 のままなので、 yarn remove して再インストールします。
$ yarn remove nuxt $ yarn add nuxt package.json を開いて確認してみてください
package.json 1
2
- "nuxt": "^1.0.0" + "nuxt": "^2.
勉強がてらTypeScriptで運営してるサービスを作りなおしているんですが、mongooseのところでちょっとハマったのでメモします。
monooseをインストールして、型定義ファイルもインストールします。
command 1
$ npm i -S mongoose $ typings install -SG dt~mongoose TypeScriptファイルにmongooseをimportします。
command 1
import * as mongoose from 'mongoose'; これでコンパイルすると、
command 1
Error TS2307: Cannot find module 'mongodb'. mongodbがないよ。と怒られるのでインストールします。
command 1