[Vue] reactive 에서 배열 타입 지정하기

이번 포스트에서는 Vue.js에서 배열의 타입을 지정하는 방법에 대해 알아보겠습니다. 배열을 반응형으로 만들어서 사용하는 경우에는 종종 해당 배열의 타입을 명시해야 합니다. 이를 위해 TypeScript의 타입 어노테이션을 사용하거나 타입 단언을 활용할 수 있습니다.

예제 1: TypeScript 타입 어노테이션 사용

첫 번째 방법으로는 TypeScript의 타입 어노테이션을 사용하여 각 배열의 타입을 명시하는 방법입니다.

import { reactive, Ref } from 'vue';

interface TestData {
  arrFst: Ref<number[]>;
  arrSec: Ref<number[]>;
}

const hahaha: TestData = reactive({
  arrFst: [],
  arrSec: []
});

 

위 코드에서는 `arrFst`와 `arrSec`를 `Ref`로 선언하고, 이를 통해 각 배열의 타입을 `number[]`로 명시하였습니다.

예제 2: 타입 단언 사용

두 번째 방법은 타입 단언을 사용하여 각 배열의 타입을 명시하는 것입니다.

import { reactive } from 'vue';

const hahaha = reactive({
  arrFst: [] as number[],
  arrSec: [] as number[]
});

 

위 코드에서는 `as number[]`를 사용하여 각 배열의 타입을 `number[]`로 명시하였습니다.