next.jsで、 NUXT - インストール

$ vue init nuxt-community/starter-template <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

こちらの手順通りにプロジェクトを作成して開発していったのはのはいいのだけど、 途中からtypescriptで書きたくなったので、導入したときのメモです。

正規の手順の場合？

nuxt.js + typescriptでプロジェクトを作成する場合、すでにテンプレートが用意されております。

$ vue init nuxt-community/typescript-template my-project

このようにコマンドを打つことで、すでにtypescriptが導入されているプロジェクトが作成できますので、 まだプロジェクト作成していないのなら、こっちの方が良いです。

本記事は、これのtypescriptに関する部分を抜き出して 既存のプロジェクトにtypescriptを導入する手順になります。

では早速手順を書いていきます。

既存のnuxt.jsプロジェクトでtsを扱えるようにする手順

package.json

dependencies, devDependenciesそれぞれに以下のように記載する。

  "dependencies": {
    "nuxt": "^1.4.1",
    "nuxt-property-decorator": "^1.2.0"
  },
  "devDependencies": {
    "ts-loader": "^3.5.0",
    "typescript": "^2.7.2"
  }

バージョンが違うとエラーが起きるかもしれないので注意して下さい。

next.config.js

こんな感じで "~/modules/typescript.js”を追加

modules: [
  '@nuxtjs/pwa', '@nuxtjs/dotenv', "~/modules/typescript.js"
],

~/modules/typescript.js

これは、とりあえずtypescript-tempateのものをそのまま持ってきました。 各項目の意味はあまり深く考えてないです。

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "module": "es2015",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "strictNullChecks": true,
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"]
    }
  }
}

sample.vue

あとは、vueファイルのscriptのlangをtsにして、文法に合わせて書いていく。 下記はnuxt.jsのvalidateの部分を書いているところ。

<script lang="ts">
import {
  Vue
} from "nuxt-property-decorator"

export default class extends Vue {
  validate ({ params }) {
    // 数値でなければならない
    return /^\d+$/.test(params.id)
  }
}
</script>

実行

$ npm install
$ npm run dev

コンパイルでエラーが起きなければ成功です。 tsで書いて、動かすことができました！

ts-lintは今回やってないです。

typescriptの書き方

typescriptは私もそんな詳しいわけじゃありませんが、ここら辺あたりが参考になりそうです。

参考