[Nuxt.js]nuxtでtypescriptを使ってみた(todolist作成)

nuxtにtypescriptを入れて使ってみました。

typescriptをインストールする
todoリストを作ってみる
1. ソースコード
2. やっていること
動作確認
サンプルソース

typescriptをインストールする

公式のセットアップ手順によると、
@nuxt/typescript-buildと@nuxt/typescript-runtimeが必要そうでした。
あと、tsconfig.jsonファイルの作成とpackeage.jsonの編集が必要です。

@nuxt/typescript-buildをインストール

yarn add --dev @nuxt/typescript-build

または

npm install --save-dev @nuxt/typescript-build

上記でインストールします。

tsconfig.jsonの作成

インストール後にtsconfig.jsonファイルをプロジェクトに設置する必要があるので、
下記のような感じで作成して、プロジェクト配下に配置しました。

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "es2018",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

@nuxt/typescript-runtimeをインストール

yarn add @nuxt/typescript-runtime

または

npm install @nuxt/typescript-runtime

上記でインストールします。

package.jsonファイルを修正する

package.jsonファイルを修正します。

{
  "name": "poc-nuxt",
  "version": "1.0.0",
  "description": "My cat&#39;s meow Nuxt.js project",
  "author": "hoge",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "generate": "nuxt-ts generate",
    "start": "nuxt-ts start"
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^0.4.6",
    "nuxt": "^2.0.0",
    "nuxt-property-decorator": "^2.7.2",
    "pug": "^2.0.4",
    "pug-loader": "^2.4.0",
    "pug-plain-loader": "^1.0.0"
  },
  "devDependencies": {
    "@nuxt/typescript-build": "^0.6.6",
    "@nuxtjs/vuetify": "^1.0.0"
  }
}

こんな感じに修正しました。
ここまでが、公式ページで載っていた導入手順です。

nuxt-property-decoratorをインストール

githubページ

これを導入することで、クラス形式でスクリプトがかけるみたいです。
これも入れて、クラス形式のみやすい感じで書いてみました。

todoリストを作ってみる

前回作ったtodoリストをtypescript化してみました。
typescriptを導入したことで可読性が上がりました。

これくらいの規模であればあんまり効果ないかもしれないですが、
大規模のプロジェクトでコードを書くときには導入必須かもしれないですねー。

ソースコード

<template lang="pug">
  div.container
    v-row
      v-col.just(cols="12")
        span {{title}}
      v-col.just(cols="8")
        v-text-field(v-model="todoItem")
        v-btn.primary(@click="addTodo()") add
    div
      v-list
        v-list-item-group(v-for="(item, key) in todos()")
          v-list-item
            v-checkbox
            v-list-item-content {{item}}
            v-list-item-icon
              v-icon(@click="deleteTodo(key)") mdi-delete-circle
          v-divider
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import { mapActions, mapGetters } from 'vuex'

@Component({
  methods: {
    ...mapGetters({
      todos: 'todo/todoList'
    }),
    ...mapActions({
      addTodoItem: 'todo/add',
      deleteItem: 'todo/delete',
    })
  }
})
export default class extends Vue {
  private todoItem: string = '';
  private title: string = '';
  private todos!: () => [];
  private addTodoItem!: (item: string) => Promise<void>;
  private deleteItem!: (key: string) => Promise<void>;

  mounted() {
    this.title = 'typescriptでtodoリスト';
  }

  public addTodo() {
    this.addTodoItem(this.todoItem);
    this.todoItem = '';
  }

  public deleteTodo(key: string) {
    this.deleteItem(key);
  }
}
</script>