nuxt-ts day2：ESlint / 型チェックなど

2020-12-01

2日目。

ESlint とは

ESLint は JavaScript のための静的検証ツール
コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立つ

nuxtだとデフォルトで良い感じの設定がされているようだ。

extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended'
  ],

試しにvscodeの拡張機能で有効化してみたら10件以上の指摘があったので直した。たしかにこれは綺麗なコードになりますね。

Prettier とは

コードフォーマッター（ソースコードを整形してくれるツール）のこと。
コードの整形は Prettier が行い、コードの構文チェックは ESLint が行うように併用するのが良いらしい。

型チェック

じゃあ型チェックはどうやってやればいいのか。

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api'

interface User {
  firstName: string
  lastName: string
}

export default defineComponent({
  setup () {
    const UserObj = ref<User>({
      firstName: 'ai',
      lastName: 'ueo'
    })
    return {
      UserObj
    }
  }
})
</script>

これで firstName に string 以外入れたらエラー出るようになった。

componentの呼び出し元、呼び出し先、どちらでも型チェックをしなきゃなのかな？もう少し上手いやりかたがありそうだが。

CompositionAPI の文法

基本的な動作を CompostionAPI + ts で書いていこう。

setup () {
    const state = reactive({
      message: 'test message !' as string
    })
    const message = computed<string>(() => state.message)
    const reverseMessage = () => {
      state.message = state.message.split('').reverse().join('')
    }

    return {
      message,
      reverseMessage
    }
  }

textを反転させるメソッド。初歩の初歩から。