8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-08-07

#前置き
今回は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の環境構築をしよう
image.png

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

8
6
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?