타입 임포트

@sgrsoft/vpe-react-sdk 는 자체 타입 선언(.d.ts)을 함께 배포합니다. 별도의 @types/* 패키지 설치 없이 TypeScript 타입을 바로 가져와 사용할 수 있습니다.

기본 사용

필요한 타입을 import type 로 가져옵니다.

import type {
    PlayerProps,     // <VpePlayer> 컴포넌트 props
    PlayerOptions,   // options 객체 스키마
    PlayerHandle,    // ref 로 노출되는 명령형 핸들
    PlayerEvent,     // onEvent 콜백 이벤트
    PlayerEventType, // 이벤트 종류 문자열 유니온
    AdOptions,       // 광고(ads) 옵션
} from "@sgrsoft/vpe-react-sdk";

값(컴포넌트/함수)과 타입을 한 번에 가져올 때는 인라인 type 지시자를 사용하면 편리합니다.

import { VpePlayer, type PlayerHandle } from "@sgrsoft/vpe-react-sdk";

내보내는 타입

타입	설명
PlayerProps	<VpePlayer> 컴포넌트에 전달하는 최상위 props 타입.
PlayerOptions	options prop 에 전달하는 플레이어 옵션 스키마.
PlayerHandle	ref 로 노출되는 명령형 제어 핸들(play, pause, seek 등).
PlayerEvent	onEvent 콜백으로 전달되는 이벤트 객체 타입.
PlayerEventType	이벤트 종류 문자열 유니온("ready" \| "play" \| ...).
AdOptions	IMA Pre-roll 광고(ads) 옵션 타입.

실전 예시

props 객체와 ref 핸들에 타입을 지정하면 편집기 자동완성과 타입 검사를 그대로 활용할 수 있습니다.

"use client";

import Hls from "hls.js";
import { useRef } from "react";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
import type { PlayerProps, PlayerHandle, PlayerEvent } from "@sgrsoft/vpe-react-sdk";

export default function PlayerPage() {
    const playerRef = useRef<PlayerHandle>(null);

    // props 를 타입 지정해 별도로 구성 — 오탈자/누락 필드를 컴파일 타임에 검출
    const props: PlayerProps = {
        accessKey: "YOUR_ACCESS_KEY",
        platform: "pub",
        stage: "prod",
        options: {
            playlist: [{ file: "https://example.com/video/master.m3u8" }],
            autostart: true,
            muted: true,
            aspectRatio: "16/9",
        },
        onEvent: (e: PlayerEvent) => {
            if (e.type === "ready") playerRef.current?.play();
        },
    };

    return <VpePlayer ref={playerRef} hls={Hls} {...props} />;
}

참고

타입 선언은 패키지의 dist/main.d.ts 에 자기완결형으로 번들되어 배포됩니다. 프로젝트의 moduleResolution 이 bundler 또는 node16 이상이면 별도 설정 없이 타입이 해석됩니다.