【NuxtJS】TypeScriptのテンプレート

NuxtJSをTypeScriptでコーディングしたときのメモ

パッケージのインストール

$ npm install --save nuxt-property-decorator vuex-class
$ npm install --save -D @types/node ts-loader typescript

index.d.tsの追加

TypeScriptでvueファイルのエラーが発生しないようにルートディレクトリに追加する

declare module "*.vue" {
  import Vue from "vue";
  const _default: Vue;
  export default _default;
}

typesディレクトリに「index.ts」「state.ts」を追加する

index.ts・・・空ファイル

state.ts

export * from "./state";

modulesディレクトリにtypescript.jsを追加

export default function() {
  // Add .ts & .tsx extension to Nuxt
  this.nuxt.options.extensions.push("ts", "tsx");

  // Extend webpack build
  this.extendBuild(config => {
    // Add TypeScript
    config.module.rules.push({
      test: /\.tsx?$/,
      loader: "ts-loader",
      options: { appendTsSuffixTo: [/\.vue$/] }
    });

    // Add .ts extension in webpack resolve
    if (!config.resolve.extensions.includes(".ts")) {
      config.resolve.extensions.push(".ts");
    }

    // Add .tsx extension in webpack resolve
    if (!config.resolve.extensions.includes(".tsx")) {
      config.resolve.extensions.push(".tsx");
    }
  });
}

モジュールをnuxt.config.jsに追加する

module.exports = {
  modules: [
    "~/modules/typescript.js"
  ]
}

tsconfig.jsonを追加

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "removeComments": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "strictPropertyInitialization": false,
    "paths": {
      "~/*": ["./*"],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@nuxt/types",
      "@nuxtjs/date-fns",
      "@types/node",
      "@nuxtjs/auth-next",
      "vuetify"
    ]
  },
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ],
}

.vueファイルのテンプレート

<template>

</template>

<script lang="ts">
import { Component, Vue, Prop, Watch} from "nuxt-property-decorator";
interface TableData {
      name: string;
      age?: number;
    }

@Component({}) // ※必須. コンポーネントを使ってなくても必要
export default class  extends Vue {
  /** head() */
  private head() {
    return ({ title: "タイトル" });
  }
  
  /** prop() */
  @Prop() name: string = "なまえ";

  /** data() */
  private isNull: boolean = false;
  private table_data: TableData = {
    name:"",
  };

  /** computed() */
  public get isEmptyName(): boolean {
    return this.name === ""; 
  }
  
  /** methods() */
  private toggleisNull(): void {
    this.isNull = !this.isNull;
  }
  
  /** Watch() */
  @Watch("table_data", { deep: true })
  private update() {
    console.log(select)
  }
}
</script>

参考

https://typescript.nuxtjs.org/ja

NuxtJS,TypeScript

Posted by Next-k