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

aLiz

2021年8月6日 18:01

前置き

今回は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

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

tsconfig.json
{
 "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を稼働させるために必要❗️

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

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

// index.vue
<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>

自動コンパイル

フレームワークなしの時にやった
$ 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を
書き込んでいきます✍️

// index.vue
<template>
 <Tutorial/>
</template>

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

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

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

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

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

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

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

// index.vue
<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>

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

##サンプルコード②props
propsについてはVue APIではなく
Nuxt TypeScriptに明記されています👀
Options API

// PropOptions.vue
<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>

// index.vue
<template>
 <div>
   <PropOptions :user="user" />
 </div>
</template>

<script lang="ts">
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しなくていいし
コンポーネント自動インポートできるし、
煩わしさがないです✨

この記事が気に入ったらサポートをしてみませんか？