Nuxt.js にTypescript の環境構築を行う方法。

nuxt.jsの公式サイトのガイドラインをもとに、新しい、プロジェクトを作成しました。Typescript の導入を行い、.tsファイルで定義している変数をvueファイル内で使用できるようにしたいと思っています。
簡単な、validationチェックのコードを作成し、動作確認を行いたいと思っておりましたが、.ts形式のファイルが読み込めていないようなのです。

【install の手順は下記の通りです。】
yarn create-nuxt-app　<project name>

Programming language:Typescript Package manager Yarn UI framework:Vuetify.js Nuxt.js modules:Axios Linst tools:ESLint Testing framework:None Rendering mode:SPA Deployment target:Server Development tools:jsconfig.json

[Typescriptの環境準備]
yarn create した段階で、typescriptを選択していたので、そもそもこのステップは必要ないのではと思ったりもしましたが、公式ガイドに従って環境構築を行いました。

1.yarn add --dev @nuxt/typescript-build @nuxt/types

2.yarn add @nuxt/typescript-runtime

3.yarn add -D @nuxtjs/eslint-config-typescript

3までインストールが完了したのち、 .eslintrc.jsファイルを作成し、
下記のコードを挿入しました。

module.exports = {
  extends: [
    '@nuxtjs/eslint-config-typescript'
  ]
}

package.jsonのファイル内にlintの項目を追加しました。

package.json
1"lint": "eslint --ext .ts,.js,.vue ."

最後にyarn devのコマンドを実行し、無事にnuxt.jsのプロジェクトが
完了できたと思い、localhost:3000で動作も確認しました。
ここにコードを作成しましたが、ここでエラーが起きました。

nuxt.js/validation.vue
1<template>
2  <v-form v-model="valid">
3    <v-container>
4      <v-row>
5        <v-col
6          cols="12"
7          md="4"
8        >
9          <v-text-field
10            v-model="firstname"
11            :rules="nameRules"
12            :counter="10"
13            label="First name"
14            required
15          ></v-text-field>
16        </v-col>
17
18        <v-col
19          cols="12"
20          md="4"
21        >
22          <v-text-field
23            v-model="lastname"
24            :rules="nameRules"
25            :counter="10"
26            label="Last name"
27            required
28          ></v-text-field>
29        </v-col>
30
31        <v-col
32          cols="12"
33          md="4"
34        >
35          <v-text-field
36            v-model="email"
37            :rules="emailRules"
38            label="E-mail"
39            required
40          ></v-text-field>
41        </v-col>
42      </v-row>
43    </v-container>
44  </v-form>
45</template>
46<script lang="ts">
47import {Component, Vue} from 'nuxt-property-decorator'
48import {validates} from '~/store/validate'
49
50@Component({})
51export default class extends Vue{
52  valid:boolean = false
53  firstname:string =""
54  lastname:string =""
55  nameRules = [
56    validates.required,
57    validates.name_length
58  ]
59  emailRules = [
60    validates.required,
61    validates.email_validate
62  ]
63
64}
65</script>
66

storeフォルダ内に格納している、validate.tsファイルをvalidation.vueファイル内で呼び出すところで、発生しました。
'~/store/validate'にエラーがメッセージが下記のようなエラーメッセージが表示されました。

Cannot find module '~/store/validate' or its corresponding type declarations.

そもそもvalidateファイルが見つからないということだと思うのですが、
公式サイトの方法にのとって作成したにも関わらず、なぜこうなったのか
理由がわかりません。
最初の段階でつまづいており、非常に困っております。
どなたか、ご教示いただけませんでしょうか？

nuxt.js/validate.ts
1export const validates = {
2    required:(v:string) => !!v||'this is required',
3    name_length:(v:string)=> v.length <= 10 || 'Name must be less than 10 characters',
4    email_validate:(v:string) => /.+@.+/.test(v) || 'E-mail must be valid',
5}

退会済みユーザー

2020/08/10 11:15

yarnは使ってないので、npmで同様に作ってみました。手順に則って、create-nuxt-appしかしてません。公式の手順が終わり、自分のアプリの作成のためにあなたが作成したファイルをpages/sample.vueとして保存してビルドしたら同様のエラーが出ました。エラーが出てる箇所はあなたが作成したファイルsample.vueの import {Component, Vue} from 'nuxt-property-decorator' import {validates} from '~/store/validate' です。別に公式の手順関係ないので、あなたが作成したファイルの↑の意味を教えて下さい。

退会済みユーザー

2020/08/10 11:31

公式の手順にはクラス表記がまだ対応してないようですね。手動で対応するには npm install nuxt-property-decorator が必要なようです。手順はまだですが、入ってれば動くようで、デコレータも処理されました。 https://github.com/nuxt-community/nuxt-property-decorator ただ、validatesは自前のようなので、あなたが ~/store/validate にあると思っているvalidatesが何なのか説明しない限り、先に進むことはありません。

takochan1192

2020/08/10 22:38

説明不足で大変失礼いたしました。何度か自分で試したところ、なんとかできました。公式ガイドに記載されていた、手順は一切いらず、yarn create nuxt-app <ファイル名> ここで、Typescriptを選択すると必要なモジュール関係は全てインストールされるようです。逆に、余計な手順を踏んでしまうとエラーが起こってしまうということがわかりました。また、nuxt-property-decoratorはこれは、追加で入れているものでした。大変失礼いたしました。ご回答ありがとうございました。