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

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

本格的に使う前に
こういう記事を見ると良いかもです💡
[Nuxt(vue) + TypeScriptをはじめるときに知っておきたかった10のこと](https://zenn.dev/nus3/articles/ec0db8857209a509646b)

フレームワークなしの場合はこちら
共通の書き方も少しずつ出しているので
気になったら見てみてください✨👀

⬇️TypeScriptとは
　TypeScriptの良さ
[【Nuxt.js】超初心者向けTypeScript〜環境構築編〜](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91%e8%b6%85%e5%88%9d%e5%bf%83%e8%80%85%e5%90%91%e3%81%91typescript%e3%80%9c%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89%e7%b7%a8%e3%80%9c/)

⬇️自動コンパイルやクラスについて
[【TS導入編】超初心者向けTypeScript〜自動コンパイル〜](https://nuxt.alizlab.com/%e3%80%90ts%e5%b0%8e%e5%85%a5%e7%b7%a8%e3%80%91%e8%b6%85%e5%88%9d%e5%bf%83%e8%80%85%e5%90%91%e3%81%91typescript%e3%80%9c%e8%87%aa%e5%8b%95%e3%82%b3%e3%83%b3%e3%83%91%e3%82%a4%e3%83%a9%e3%80%9c/)
[【TS導入編】超初心者向けTypeScript〜環境構築の補足＆クラスなど〜](https://nuxt.alizlab.com/%e3%80%90ts%e5%b0%8e%e5%85%a5%e7%b7%a8%e3%80%91%e8%b6%85%e5%88%9d%e5%bf%83%e8%80%85%e5%90%91%e3%81%91typescript%e3%80%9c%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89%e3%81%ae%e8%a3%9c%e8%b6%b3%ef%bc%86/)

参考:
[そのNuxt、TypeScriptで。](https://qiita.com/okmt_okmt_/items/a95c9aef4024f2f695cf)
[Nuxt.js TypeScript - 実践TypeScript アップデート -](https://qiita.com/Takepepe/items/6e99d2f64f0814704e0f)
[[Vue+TypeScript] Vue.extend で Vue らしさを保ちつつ TypeScript で書くときの型宣言についてまとめた](https://qiita.com/is_ryo/items/6fc799ba4214db61d8ab)

#インストール
まずはインストール

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

⬇️プロジェクト作成方法はこちら
[【Nuxt.js】Nuxtの環境構築をしよう](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91nuxt%e3%81%ae%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89%e3%82%92%e3%81%97%e3%82%88%e3%81%86/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/c970d191-e6de-f691-0935-548b08682700.png)

##3つのパッケージ
3つのパッケージがありますが
必須とオプションに分かれます。
[Nuxt TypeScript > イントロダクション](https://typescript.nuxtjs.org/ja/guide/introduction/)

必須パッケージ
$ npm init nuxt-appで
TSを選択すると
この2つが入ります。
**@nuxt/types
@nuxt/typescript-build**
buildはNuxtをTypeScriptでコンパイルするのに必要
[Nuxt TypeScript > セットアップ](https://typescript.nuxtjs.org/ja/guide/setup/)

```
$ 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（オプション）](https://typescript.nuxtjs.org/ja/guide/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](https://github.com/webpack/webpack-dev-server)
[ts-loader](https://github.com/TypeStrong/ts-loader)
が必要な感じもします。
設定がチンプンカンプンだったので
ある程度使うようになってから
こちらを参考にやってみます🍀
[最新版TypeScript+webpack 5の環境構築まとめ](https://ics.media/entry/16329/#webpack-ts-vue)

#Vue.extendで書いてみる
書き方がいくつかある中で
1番良いのがVue.extend❤️
[Options API](https://typescript.nuxtjs.org/ja/cookbook/components/#script) と言われています💫

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 > オプション/データ](https://jp.vuejs.org/v2/api/index.html#data)

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

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

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

コードはこちらを使わせていただきました。
[[Vue+TypeScript] Vue.extend で Vue らしさを保ちつつ TypeScript で書くときの型宣言についてまとめた](https://qiita.com/is_ryo/items/6fc799ba4214db61d8ab)

```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](https://typescript.nuxtjs.org/ja/cookbook/components/#script)

```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）](https://tech.smartshopping.co.jp/nuxt-typed-vuex)

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

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

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