使用例

<script setup lang="ts">

enum Gender {
  GIRL = "Girl",
  BOY = "Boy",
}

enum Hobby {
  SPORT = "Sport",
  TVGAME = "TvGame",
}

enum Score {
  HIGH = "High",
  MIDDLE = "Middle",
  LOW = "Low",
}

interface Human {
  gender: Gender;
  hobby: Hobby;
  score: Score;
}

const options = reactive<Human>({
  gender: Gender.GIRL,
  hobby: Hobby.SPORT,
  score: Score.HIGH,
});
</script>

このようにinterfaceとenumを合わせて使用すれば、
指定した値以外の混入を防げる。

例えば、

const options = reactive<Human>({
  gender: 'girl',
  hobby: Hobby.SPORT,
  score: Score.HIGH,
});

のように書くことができない