Nuxt3 + TypeScript でのプチ Tips 集です。
なお、コーディングスタイルは Nuxt3 で標準的である、Vue3 Composition API 形式で統一しています。
コンポーネントの props に２次元配列の型を指定する方法 (PropType を使う)
vue
<script lang="ts" setup>
import { PropType } from "vue";
/** コンポーネントのプロパティ */
const props = defineProps({
cells: {
type: Array as PropType<string[][]>, // string[][]型
},
});
// 2次元配列 props.cells の内容を読み込む適当なサンプルコード
for (let i = 0; i < props.cells.length; i++) {
for (let j = 0; j < props.cells[i].length; j++) {
console.log(props.cells[i][j]);
}
}
</script>
props の type には String, Number, Boolean, Array, Object, Date, Function, Symbol を指定する必要がある が、PropType<T> を使うことで TypeScript の型機能を存分に発揮できます。