【TS導入編】超初心者向けNuxt TypeScript 〜Options API〜

前置き

今回はNuxt TypeScriptについてです。
導入方法と簡単な書き方をご紹介🌟

本格的に使う前に
こういう記事を見ると良いかもです💡
Nuxt(vue) + TypeScriptをはじめるときに知っておきたかった10のこと

フレームワークなしの場合はこちら

共通の書き方も少しずつ出しているので
気になったら見てみてください✨👀

⬇️TypeScriptとは
　TypeScriptの良さ
【Nuxt.js】超初心者向けTypeScript〜環境構築編〜

⬇️自動コンパイルやクラスについて
【TS導入編】超初心者向けTypeScript〜自動コンパイル〜
【TS導入編】超初心者向けTypeScript〜環境構築の補足＆クラスなど〜

参考:
そのNuxt、TypeScriptで。
Nuxt.js TypeScript - 実践TypeScript アップデート -
[Vue+TypeScript] Vue.extend で Vue らしさを保ちつつ TypeScript で書くときの型宣言についてまとめた

インストール

まずはインストール

$ npm init nuxt-appで
Nuxtプロジェクト作成時に
選択していれば
別途のインストールは必要なし❗️

⬇️プロジェクト作成方法はこちら
【Nuxt.js】Nuxtの環境構築をしよう

3つのパッケージ

3つのパッケージがありますが
必須とオプションに分かれます。
Nuxt TypeScript > イントロダクション

必須パッケージ

$ npm init nuxt-appで
TSを選択すると
この2つが入ります。
@nuxt/types
@nuxt/typescript-build
buildはNuxtをTypeScriptでコンパイルするのに必要
Nuxt TypeScript > セットアップ

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

export default {
  buildModules: ['@nuxt/typescript-build']
}

export default {

buildModules: ['@nuxt/typescript-build']

}

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./app/*"
      ],
      "~/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "@nuxtjs/firebase",
      "@nuxtjs/dayjs",
      "nuxt-i18n"
    ]
  },
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]
}

{

"compilerOptions": {

"target": "ES2018",

"module": "ESNext",

"moduleResolution": "Node",

"lib": [

"ESNext",

"ESNext.AsyncIterable",

"DOM"

"esModuleInterop": true,

"allowJs": true,

"sourceMap": true,

"strict": true,

"noEmit": true,

"experimentalDecorators": true,

"baseUrl": ".",

"paths": {

"@/*": [

"./app/*"

"~/*": [

"./*"

]

"types": [

"@types/node",

"@nuxt/types",

"@nuxtjs/firebase",

"@nuxtjs/dayjs",

"nuxt-i18n"

]

"exclude": [

"node_modules",

".nuxt",

"dist"

]

}

オプションパッケージ

nuxt-tsを使用したいなら
こちらも入れてね
ということらしいです。
@nuxt/typescript-runtime
Nuxt TypeScript > Runtime（オプション）

nuxt-tsとは何ぞや❓
という感じですが、
$ npm init nuxt-appで
custom server frameworkを
選択している場合に必要。
つまりサーバーでTypeScriptを使った
Nuxtを稼働させるために必要❗️

今はその質問がなくなったので、
自分で後入れしている場合は
インストールしましょう💡

動作確認

必須パッケージのみで
とりあえずシンプルな型指定で
エラーもなく動きました。

<template>
  <button type="button" @click="message">click</button>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'Page',
  methods: {
    message() {
      const text: string = 'hello!'
      console.log(text)
    }
  }
})
</script>

<button type="button" @click="message">click</button>

</template>

import Vue from 'vue'

export default Vue.extend({

methods: {

message() {

const text: string = 'hello!'

console.log(text)

}

})

</script>

自動コンパイル

フレームワークなしの時にやった
$ npm run generate
してからlite-serverを使用しても
上手くいきませんでした。

ローカルサーバーと
自動ブラウザリロード系が必要かも…
BrowserSyncとかts-loaderあたり…❓🤔

と思ったのですがNuxtの場合は
ひとまずこれで動きます🌟

$ npm run dev // macターミナル
$ tsc -watch // エディターターミナル

tscコマンドを使うには
TSのグローバルインストールが必要💫

$ npm install typescript --save-dev

ただやっぱり
webpack-dev-server
ts-loader
が必要な感じもします。
設定がチンプンカンプンだったので
ある程度使うようになってから
こちらを参考にやってみます🍀
最新版TypeScript+webpack 5の環境構築まとめ

Vue.extendで書いてみる

書き方がいくつかある中で
1番良いのがVue.extend❤️
Options API と言われています💫

script内がこんな感じで
ここにどんどんTSを
書き込んでいきます✍️

<template>
  <Tutorial/>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({})
</script>

</template>

import Vue from 'vue'

export default Vue.extend({})

</script>

サンプルコード①data

雰囲気を掴むために
dataで使用してみましょう。
VueのAPIを確認すると
こう書かれています✍️
Vue > API > オプション/データ

// Vue.extend() 内では、関数を使わなければいけない
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

// Vue.extend() 内では、関数を使わなければいけない

var Component = Vue.extend({

data: function () {

return { a: 1 }

}

})

ということで
Nuxtで書いてみましょう❣️

ほとんどVueと変わりません。
DataTypeの部分は好きな名称でOK⭕️
TSだと分かりやすくするために、
先頭は大文字にする方が良さそうです。

コードはこちらを使わせていただきました。
[Vue+TypeScript] Vue.extend で Vue らしさを保ちつつ TypeScript で書くときの型宣言についてまとめた

<template>
  <div>
    <p>{{ value }}</p>
    <p>{{ enable }}</p>
    <p>{{ count }}</p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export type DataType = {
  value: string
  enable: boolean
  count: number
}

export default Vue.extend({
  name: 'Page',
  data(): DataType {
    return {
      value: 'hoge',
      enable: true,
      count: 0
    }
  }
})
</script>

<div>

<p>{{ value }}</p>

<p>{{ enable }}</p>

<p>{{ count }}</p>

</div>

</template>

import Vue from 'vue'

export type DataType = {

value: string

enable: boolean

}

export default Vue.extend({

data(): DataType {

return {

value: 'hoge',

enable: true,

}

})

</script>

他も同じような書き方です！
型定義をしておいて、
Vue.extend内では
実際の値、式を書いていく…
といった感じですね🌱✨

サンプルコード②props

propsについてはVue APIではなく
Nuxt TypeScriptに明記されています👀
Options API

<template>
  <p>{{ user.message }}</p>
</template>

<script lang="ts">
import Vue, { PropOptions } from 'vue'

interface User {
  message: string
}
export default Vue.extend({
  name: 'PropOptions',
  props: {
    user: {
      type: Object,
      required: false
    } as PropOptions<User>
  }
})
</script>

<p>{{ user.message }}</p>

</template>

import Vue, { PropOptions } from 'vue'

interface User {

message: string

}

export default Vue.extend({

props: {

user: {

type: Object,

required: false

} as PropOptions<User>

}

})

</script>

<template>
  <div>
    <PropOptions :user="user" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      user: {
        message: 'Hello!'
      }
    }
  }
})
</script>

<div>

</div>

</template>

import Vue from 'vue'

export default Vue.extend({

data() {

return {

user: {

message: 'Hello!'

}

})

</script>

storeの場合

Vuexを使用したいから
storeに書く…
となるとまた色々かわるので、
そちらも記事にしたいですね🎈🧸
これがすごく参考になりそう…！
Options APIを使用してNuxt.js + TypeScriptでVuexに型指定する方法（nuxt-typed-vuex）

まとめ

TSについて色々やってきましたが、
やっとスタート地点…
の手前くらいは来ました❗😂笑

公式のどのページを確認すれば良いのか
なかなか分からずにググり続け…🔎
ようやく分かってきたのが
大きいかもしれません🎈🧸

あと最近のNuxtホントにイイですね👍💕
ディレクトリシンプルになったし、
質問答えるだけで必要なものだけ入るし、
$ npm install nuxtしなくていいし
コンポーネント自動インポートできるし、
煩わしさがないです✨