Vueと共通

【Nuxt.js】TypeScript基礎編:Vue.extendでシンプルなコードを書こう

前置き

今回はNuxt.jsでTypeScript🎈🧸
大まかに3つに分けて書いています✍️

  • TSのメリット
  • TSの書き方3つ
  • Vue.extendコード例

TSのメリット

すごく簡単に言うと、
安全な開発がしやすくなります🦺👷‍♀️
ここが参考になります!
https://qiita.com/SoraKumo/items/43fba2ad2d10336a665


TSの書き方

TSを入れた場合の書き方は3パターン
シンプルで書きやすいのがVue.extendです🍒

  • Vue.extend
  • vue-class-component
  • vue-property-decorator

Vue.extendのメリット

簡単⭕️
1番とっつきやすい書き方🌟

何故なら!
通常と書き方がほとんど変わらないから!
Vue、Nuxtらしさを保ったままTSが使えます。

TSなしの場合と変わるのは3点のみ!!!
他は通常と変わらない
これがVue.extendの良さ😄

  • script langをtsに変更
  • Vueモジュールをimport/extend
  • コンポーネント、ページ自体にクラス名を付与

他の書き方は?

@Componentとかになるあれ。
書き方が結構変わりますよね〜!
vue-class-component
vue-property-decorator 

nuxtの場合はこちら
nuxt-class-component
https://github.com/nuxt-community/nuxt-class-component
nuxt-property-decorator
https://github.com/nuxt-community/nuxt-property-decorator

詳しい書き方はこちらが参考になります!
https://qiita.com/potato4d/items/c9c0c8e674f20c85948a


Vue.extend

【基礎構文】
通常と比較しても
シンプルで非常に分かりやすいですね!🍀

公式はこちら
https://typescript.nuxtjs.org/ja/
https://jp.vuejs.org/v2/guide/typescript.html#基本的な使い方

【通常】


 

data

Stringの場合は
" "(double quote)ではなく
' ' (single quote)のみ⭕️


props

TSなしの場合と変わりません。
type
required
validator
全てそのまま書けます✍️


methods

こちらも同様
$emitなども通常通り記載可能です。


console.log()

methodsやライフサイクルで
console.log()を使用する場合ESlintにひっかかります。
その場合は// eslint-disable-lineを追記すれば⭕️
https://eslint.org/docs/rules/no-console

-Vueと共通
-,

© 2024 aLiz Nuxt