Vueでのフロント実装をレビューしていて思ったこと

環境

Vue3系
TypeScript

import

importが沢山になった時

あまりにimportするモジュールが多くなると、
<script>内が汚く見えてしまいます。
また、このコンポーネントには何がimportされているのか
見づらくなってしまいます。

そのため、importする種類ごとに分けて記述する方法を取りました。
例えば、/modelsに該当するモジュールはmoduleブロックに、
/utilsに該当するモジュールはutilsブロックに分けて書く感じです。

<script>
// modules
import User from 'src/modules/User.ts'
import Company from 'src/modules/Company.ts'

// utils
import getUser from 'src/utils/getUser.ts'
import convertCompanyCode from 'src/utils/convertCompanyCode.ts'
</script>

相対パスと絶対パスの混在

importに相対パスと絶対パスが混在していると、
例えば該当Vueファイルを別ディレクトリに移動させた際にパスが切れてしまったりします。
また見た目も統一感がなくて気持ち悪いです。

例）

<script>
import User from 'src/modules/User.ts'
import Company from '../../Company.ts'
</script>

そこでimportのパスは絶対パスに統一すると良いかなと思っています。

undefined

dataの型宣言

<script>
const userName = ref<string | undefined>('')
</script>

こんな記述があって、はてな？となりました。
空文字でdataの初期化ができているのに、どうしてundefined型を宣言しているのでしょう。

仮にundefinedになる可能性があるのであれば
このように初期段階で空にしておけば良いです。

<script>
const userName = ref<string>()
</script>

もしくは文字型のみで型宣言して、undefinedが代入される可能性のある処理では
このように、代入元がなければ空文字が入るよう記述しておけば良いです。

<script>
const setUserName = (newValue: string | undefined): void => {
  userName.value = newValue || ''
}
</script>

undefinedの可能性がある引数を取る関数

export default (userId: number | undefined): string | null => {
  if (!userId) return null
  return userList.find(user => user.id === userId).name || null
}

このように引数にundefinedを取る関数がありました。

undefinedエスケープをする処理が無駄なように見えます。
そもそもuserIdが存在しなかったら、
呼び出し元でこの関数を使用しなければいい話だと思います。

そのため、引数にundefined可能性がある関数は
使用用途や使用方法について精査した方が良いかなと考えています。