nuxt-ts day2:ESlint / 型チェックなど
2020-12-01
# diary2日目。
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を反転させるメソッド。初歩の初歩から。