유틸리티 타입
INFO
이 페이지는 사용법에 대한 설명이 필요할 수 있는 몇 가지 일반적으로 사용되는 유틸리티 타입을 나열합니다. 내보낸 타입의 전체 목록을 확인하려면 소스 코드를 참조하십시오.
PropType<T>
런타임 props 선언을 사용할 때 보다 고급 유형으로 prop을 주석 처리하는 데 사용됩니다.
예시
tsimport type { PropType } from 'vue' interface Book { title: string author: string year: number } export default { props: { book: { // `Object`에 더 구체적인 타입 제공 type: Object as PropType<Book>, required: true } } }
MaybeRef<T>
T | Ref<T>
의 별칭입니다. 컴포저블의 인자를 주석 처리하는 데 유용합니다.
- 3.3+에서만 지원됩니다.
MaybeRefOrGetter<T>
T | Ref<T> | (() => T)
의 별칭입니다. 컴포저블의 인자를 주석 처리하는 데 유용합니다.
- 3.3+에서만 지원됩니다.
ExtractPropTypes<T>
런타임 props 옵션 객체에서 prop 타입을 추출합니다. 추출된 타입은 내부 지향적입니다 - 즉, 컴포넌트가 받는 해결된 props입니다. 이는 boolean props와 기본값이 있는 props는 필수가 아니더라도 항상 정의된다는 것을 의미합니다.
부모가 전달할 수 있는 props, 즉 공개적으로 직면하는 props를 추출하려면 ExtractPublicPropTypes
를 사용하세요.
예시
tsconst propsOptions = { foo: String, bar: Boolean, baz: { type: Number, required: true }, qux: { type: Number, default: 1 } } as const type Props = ExtractPropTypes<typeof propsOptions> // { // foo?: string, // bar: boolean, // baz: number, // qux: number // }
ExtractPublicPropTypes<T>
런타임 props 옵션 객체에서 prop 타입을 추출합니다. 추출된 타입은 공개적으로 직면합니다 - 즉, 부모가 전달할 수 있는 props입니다.
3.3+에서만 지원됩니다.
예시
tsconst propsOptions = { foo: String, bar: Boolean, baz: { type: Number, required: true }, qux: { type: Number, default: 1 } } as const type Props = ExtractPublicPropTypes<typeof propsOptions> // { // foo?: string, // bar?: boolean, // baz: number, // qux?: number // }
ComponentCustomProperties
컴포넌트 인스턴스 타입을 사용자 정의 전역 속성을 지원하도록 확장하는 데 사용됩니다.
예시
tsimport axios from 'axios' declare module 'vue' { interface ComponentCustomProperties { $http: typeof axios $translate: (key: string) => string } }
TIP
확장은 모듈
.ts
또는.d.ts
파일에 배치해야 합니다. 더 자세한 내용은 타입 확장 위치를 참조하세요.
ComponentCustomOptions
사용자 정의 옵션을 지원하도록 컴포넌트 옵션 타입을 확장하는 데 사용됩니다.
예시
tsimport { Route } from 'vue-router' declare module 'vue' { interface ComponentCustomOptions { beforeRouteEnter?(to: any, from: any, next: () => void): void } }
TIP
확장은 모듈
.ts
또는.d.ts
파일에 배치해야 합니다. 더 자세한 내용은 타입 확장 위치를 참조하세요.
ComponentCustomProps
TSX 요소에서 선언되지 않은 props를 사용하기 위해 허용된 TSX props를 확장하는 데 사용됩니다.
예시
tsdeclare module 'vue' { interface ComponentCustomProps { hello?: string } } export {}
tsx// 이제 hello가 선언된 prop이 아니더라도 작동합니다 <MyComponent hello="world" />
TIP
확장은 모듈
.ts
또는.d.ts
파일에 배치해야 합니다. 더 자세한 내용은 타입 확장 위치를 참조하세요.
CSSProperties
스타일 속성 바인딩에서 허용되는 값에 추가하는 데 사용됩니다.
예시
모든 사용자 정의 CSS 속성 허용
tsdeclare module 'vue' { interface CSSProperties { [key: `--${string}`]: string } }
tsx<div style={ { '--bg-color': 'blue' } }>
html<div :style="{ '--bg-color': 'blue' }"></div>
TIP
확장은 모듈 .ts
또는 .d.ts
파일에 배치해야 합니다. 더 자세한 내용은 타입 확장 위치를 참조하세요.
참고
SFC <style>
태그는 CSS 값과 동적 컴포넌트 상태를 v-bind
CSS 함수를 사용하여 연결할 수 있게 지원하여, 타입 확장 없이 사용자 정의 속성을 가능하게 합니다.