【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-class-component
・vue-property-decorator

シンプルで書きやすいのがVue.extendです🍒

Vue.extendのメリット

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

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

TSなしの場合と変わるのは3点のみ！！！
・script langをtsに変更
・Vueモジュールをimport/extend
・コンポーネント、ページ自体にクラス名を付与

他は通常と変わらない
これがVue.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#基本的な使い方

index.vue

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

export default Vue.extend({
 // コンポーネント・ページ自体にクラスを付与
 name: 'Component',
 components: {
 },
 props: {
 },
 data() {
  return {
  }
 },
 computed: {
 },
 mounted () {
 },
 methods: {
 },
 created () {
   console.log('CLICK!!!')// eslint-disable-line
 },
})
</script>

【通常】

index.vue

<script>
export default {
 components: {
 },
 props: {
 },
 data() {
  return {
  }
 },
 computed: {
 },
 mounted () {
 },
 methods: {
 },
 created () {
   console.log('CLICK!!!')// eslint-disable-line
 },
}
</script>

data

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

index.vue

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

export default Vue.extend({
 name: 'Component',
 data () {
   return {
     userName: '',
   }
 },
})
</script>

props

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

index.vue

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

export default Vue.extend({
 name: 'Component',
 props: {
   status: {
     type: String,
     required: false,
     validator (value) {
       return [
         'default',
       ].includes(value)
     },
   },
 },
})
</script>

methods

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

index.vue

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

export default Vue.extend({
 name: 'Component',
 methods: {
   alert () {
     this.$emit('componentAlert')
   },
 },
})
</script>

console.log()

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

index.vue

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

export default Vue.extend({
 name: 'Component',
 created () {
   console.log('created!!!')// eslint-disable-line
 },
})
</script>