유틸리티 타입 #

PropType<T> #

런타임 프롭 선언을 사용할 때 고급 유형으로 프롭에 주석을 달 때 사용합니다.

Used to annotate a prop with more advanced types when using runtime props declarations.

• 예제:

  ts

  import { PropType } from 'vue'
  
  interface Book {
    title: string
    author: string
    year: number
  }
  
  export default {
    props: {
      book: {
        // `객체`에 보다 구체적인 유형을 제공합니다.
        // provide more specific type to `Object`
        type: Object as PropType<Book>,
        required: true
      }
    }
  }
  

• 참고: 가이드 - Typing Component Props

ComponentCustomProperties #

컴포넌트 인스턴스 유형을 보강하여 커스텀 글로벌 프로퍼티를 지원하는 데 사용됩니다.

Used to augment the component instance type to support custom global properties.

• 예제:

  ts

  import axios from 'axios'
  
  declare module 'vue' {
    interface ComponentCustomProperties {
      $http: typeof axios
      $translate: (key: string) => string
    }
  }
  

  TIP

  증강은 모듈 .ts 또는 .d.ts 파일에 배치해야 합니다. 자세한 내용은 타입 증강 배치를 참조하세요.

  Augmentations must be placed in a module .ts or .d.ts file. See Type Augmentation Placement for more details.

• 참고: 가이드 - Augmenting Global Properties

ComponentCustomOptions #

사용자 지정 옵션을 지원하기 위해 컴포넌트 옵션 유형을 보강하는 데 사용됩니다.

Used to augment the component options type to support custom options.

• 예제:

  ts

  import { Route } from 'vue-router'
  
  declare module 'vue' {
    interface ComponentCustomOptions {
      beforeRouteEnter?(to: any, from: any, next: () => void): void
    }
  }
  

  TIP

  증강은 모듈 .ts 또는 .d.ts 파일에 배치해야 합니다. 자세한 내용은 타입 증강 배치를 참조하세요.

  Augmentations must be placed in a module .ts or .d.ts file. See Type Augmentation Placement for more details.

• 참고: 가이드 - Augmenting Custom Options

ComponentCustomProps #

TSX 앨리먼트에 신고되지 않은 prop을 사용하기 위해 허용된 TSX prop을 보강하는 데 사용됩니다.

Used to augment allowed TSX props in order to use non-declared props on TSX elements.

• 예제:

  ts

  declare module 'vue' {
    interface ComponentCustomProps {
      hello?: string
    }
  }
  
  export {}
  

  tsx

  // 이제 hello가 선언된 prop이 아니어도 작동합니다.
  // now works even if hello is not a declared prop
  <MyComponent hello="world" />
  

  TIP

  증강은 모듈 .ts 또는 .d.ts 파일에 배치해야 합니다. 자세한 내용은 타입 증강 배치를 참조하세요.

  Augmentations must be placed in a module .ts or .d.ts file. See Type Augmentation Placement for more details.

CSSProperties #

스타일 속성 바인딩에서 허용되는 값을 보강하는 데 사용됩니다.

Used to augment allowed values in style property bindings.

• 예제:

  Allow any custom CSS property

  ts

  declare module 'vue' {
    interface CSSProperties {
      [key: `--${string}`]: string
    }
  }
  

  tsx

  <div style={ { '--bg-color': 'blue' } }>
  

  html

  <div :style="{ '--bg-color': 'blue' }">
  

  TIP

증강은 모듈 .ts 또는 .d.ts 파일에 배치해야 합니다. 자세한 내용은 타입 증강 배치를 참조하세요.

Augmentations must be placed in a module .ts or .d.ts file. See Type Augmentation Placement for more details. :::