Vue.js + 타입 스크립트:@Prop 타입을 문자열 배열로 설정하는 방법
올바른 설정 방법은 무엇입니까?type
의 속성@Prop
의 장식가.Array<string>
그게 가능하긴 해?
로만 설정할 수 있습니다.Array
없이.string
다음과 같이 합니다.
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
@Prop({ type: Array, default: [] }) private readonly myProperty!: string[];
}
</script>
바꾸려고 하면Array<string>
또는 심지어string[]
다음의 에러가 표시됩니다.
Argument of type '{ type: boolean; default: never[]; }' is not assignable
to parameter of type 'PropOptions<any> | Constructor | Constructor[] | undefined'.
Types of property 'type' are incompatible. Type 'boolean' is not assignable to type
'(new (...args: string[]) => Function) | (() => any) | (new (...args: never[]) => any) | Prop<any>[] | undefined'.
이 에러 메세지는, 한층 더 혼란스럽게 합니다.왜 이 타입은 현재 다음과 같이 인식되고 있습니까?boolean
?
유형 어설션 추가as PropType<string[]>
이 경우 도움이 됩니다.
<script lang="ts">
import { PropType } from "vue"
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
@Prop({
type: Array as PropType<string[]>, // use PropType
default: () => [] // use a factory function
}) private readonly myProperty!: string[];
}
</script>
출처: 관련 문서@Prop
주석입니다.
디폴트값도 주의해 주세요.Array
및Object
는 항상 공장 기능(소스)에서 반환해야 합니다.이것에 의해, 복수의 컴포넌트인스턴스간에 속성을 공유하지 않게 됩니다.
언급URL : https://stackoverflow.com/questions/63796824/vue-js-typescript-how-to-set-prop-type-to-string-array
'programing' 카테고리의 다른 글
'apollo-link-state'와 'vuex'는 어떤 것을 사용하여 상태를 관리해야 합니까? (0) | 2022.08.11 |
---|---|
v-for with v-if (0) | 2022.08.08 |
돌연변이가 있는 vuex 상태를 변경하는 방법 (0) | 2022.08.08 |
Vue Draggable 이전 목록으로 이동 (0) | 2022.08.08 |
Vue js vee의 암호 확인은 항상 false (0) | 2022.08.08 |