JenniferSoft Design Docs

Appearance

Global Types ​

@jennifersoft/apm-components 라이브러리를 추가하면 아래 타입들이 글로벌로 정의되어, 별도의 Import 없이 사용할 수 있습니다.

타입 정의 ​

typescript
// 국제화 문자열 타입
type I18n = Record<string, string>;

// 플랫폼 타입
type PlatformType = 'java' | 'net' | 'php' | 'python' | 'opentelemetry';

// 언어 타입
type LanguageType = 'ko' | 'en' | 'ja';

// 테마 타입
type ThemeType = 'classic' | 'dark';

사용 예제 ​

I18n 타입 사용 ​

vue
<script setup lang="ts">
import { provide } from 'vue';

// I18n 타입을 별도 import 없이 사용
provide<I18n>('i18n', {
    method: 'Method',
    sql: 'SQL',
    externalCall: 'External Call',
    error: 'Error',
});
</script>

PlatformType 사용 ​

vue
<script setup lang="ts">
// 플랫폼별 로직 분기
const handlePlatformSpecificLogic = (platform: PlatformType) => {
    switch (platform) {
        case 'java':
            return 'Java 플랫폼 처리';
        case 'net':
            return '.NET 플랫폼 처리';
        case 'php':
            return 'PHP 플랫폼 처리';
        case 'python':
            return 'Python 플랫폼 처리';
        case 'opentelemetry':
            return 'OpenTelemetry 플랫폼 처리';
        default:
            return '알 수 없는 플랫폼';
    }
};
</script>

LanguageType 사용 ​

vue
<script setup lang="ts">
// 언어별 설정
const setLanguage = (lang: LanguageType) => {
    console.log(`언어를 ${lang}로 설정합니다.`);
};

// 사용
setLanguage('ko'); // 한국어
setLanguage('en'); // 영어
setLanguage('ja'); // 일본어
</script>

ThemeType 사용 ​

vue
<script setup lang="ts">
// 테마별 스타일 적용
const applyTheme = (theme: ThemeType) => {
    document.documentElement.setAttribute('data-theme', theme);
};

// 사용
applyTheme('classic'); // 클래식 테마
applyTheme('dark'); // 다크 테마
</script>

타입 확장 ​

필요에 따라 모듈 보강(Module Augmentation)을 통해 추가 글로벌 타입을 정의할 수 있습니다:

typescript
// types/global.d.ts
declare global {
    // 커스텀 글로벌 타입 추가
    type CustomMetricType = 'cpu' | 'memory' | 'disk' | 'network';

    // 기존 타입 확장
    type ExtendedPlatformType = PlatformType | 'nodejs' | 'go';
}

export {};

주의사항 ​

  1. 타입 안전성: 글로벌 타입을 사용할 때는 타입 안전성을 위해 정확한 값만 사용하세요.
  2. 네이밍 충돌: 다른 라이브러리와의 타입 네이밍 충돌에 주의하세요.
  3. 업데이트: 라이브러리 업데이트 시 타입 정의 변경사항을 확인하세요.

관련 문서 ​