앰비언트 모듈 선언

// Example: some-legacy-library.d.ts
declare module 'some-legacy-library' {
  // 이 블록 안에 'some-legacy-library' 모듈의 타입을 정의합니다.

  export interface Options {
    debugMode: boolean;
    logLevel: 'info' | 'warn' | 'error';
  }

  export function initialize(options: Options): void;
  export function fetchData<T>(url: string): Promise<T>;
  export const version: string;

  // 기본(default) 내보내기가 있다면 이렇게 선언합니다.
  export default class SomeClient {
    constructor(apiKey: string);
    sendRequest(data: any): Promise<any>;
  }
}

// app.ts
import { initialize, fetchData, version } from 'some-legacy-library';
import SomeClient from 'some-legacy-library'; // default export 가져오기

initialize({ debugMode: true, logLevel: 'info' });
console.log(`Library Version: ${version}`);

async function loadData() {
  const data = await fetchData<{ name: string; value: number }>('/api/data');
  console.log(data.name, data.value);
}

const client = new SomeClient('my-api-key');
client.sendRequest({ type: 'report' });

// initialize({}); // Error: 'Options' 형식에 'debugMode' 및 'logLevel' 속성이 없습니다.

// types/custom-file-types.d.ts 또는 src/declarations.d.ts
declare module '*.png' {
  const value: string; // 일반적으로 이미지 파일은 번들링 후 URL 문자열로 처리됩니다.
  export default value;
}

declare module '*.svg' {
  // SVG 파일을 React 컴포넌트로 가져오는 경우 (예: @svgr/webpack)
  import * as React from 'react';
  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>;
  const src: string;
  export default src;
}

declare module '*.css' {
  const content: { [className: string]: string }; // CSS Module을 사용하는 경우
  export default content;
}

declare module '*.json' {
  const value: any; // JSON 파일은 객체로 직접 로드될 수 있습니다.
  export default value;
}

// app.ts
import logo from './assets/logo.png'; // logo의 타입은 string
import Icon from './assets/icon.svg'; // Icon은 ReactComponent, 기본 export는 src (string)
import styles from './styles/main.css'; // styles의 타입은 { [className: string]: string }

console.log(logo); // 예: "/static/media/logo.9259f60f.png"
if (Icon.ReactComponent) {
  // React 컴포넌트로 사용 가능
}
console.log(styles.container); // 예: "main_container__abc123"

// global-script-types.d.ts
// 이 파일은 HTML <script> 태그로 로드되는 자바스크립트 파일에 대한 타입 정의입니다.

// 전역 변수 선언
declare var MY_APP: {
  version: string;
  debugMode: boolean;
};

// 전역 함수 선언
declare function initializeApp(config: { theme: string }): void;

// 전역 객체 확장 (예: window 객체에 추가되는 속성)
interface Window {
  _paq?: Array<any>; // Matomo (Piwik) 같은 분석 스크립트가 추가하는 전역 변수
}

// 네임스페이스를 사용하여 관련된 전역 객체를 그룹화
declare namespace MyGlobalUtils {
  function formatCurrency(amount: number): string;
  class DataLoader {
    load(url: string): Promise<any>;
  }
}