【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#基本的な使い方

<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>

import Vue from 'vue'

export default Vue.extend({

// コンポーネント・ページ自体にクラスを付与

components: {

props: {

data() {

return {

}

computed: {

mounted () {

methods: {

created () {

console.log('CLICK!!!')// eslint-disable-line

})

</script>

【通常】

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

export default {

components: {

props: {

data() {

return {

}

computed: {

mounted () {

methods: {

created () {

console.log('CLICK!!!')// eslint-disable-line

}

</script>

data

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

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

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

import Vue from 'vue'

export default Vue.extend({

data () {

return {

userName: '',

}

})

</script>

props

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

<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>

import Vue from 'vue'

export default Vue.extend({

props: {

status: {

type: String,

required: false,

validator (value) {

return [

'default',

].includes(value)

})

</script>

methods

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

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

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

import Vue from 'vue'

export default Vue.extend({

methods: {

alert () {

this.$emit('componentAlert')

})

</script>

console.log()

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

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

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

import Vue from 'vue'

export default Vue.extend({

created () {

console.log('created!!!')// eslint-disable-line

})

</script>