Help us understand the problem. What is going on with this article?

【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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした