[타입스크립트] declare module 정리

 

 

🟡 declare module

- declare는 선언하다라는 의미

- 실제 전역변수 선언 이외에 선언 키워드를 사용해 전역 함수, 전역 클래스 등을 선언할 수도 있다.

- 이는 d.ts파일을 찾는다던지 해당 라이브러리의 d.ts 파일을 받아오는 것이다.

d.ts란 declare typescript의 약자로 차입 선언 파일 뒤에 붙이는 확장자명

 

 

 

 

---

 

✅ vite프로젝트를 사용한다면 clident.s.ts 모듈을 선언하는 코드들을 볼 수 있다. 

 

 

- 왜 선언하는 걸까?

- 선언하지 않으면 타입스크립트 컴파일러가 이러한 모듈을 인식하지 못하고 에러 메세지를 표시하기 때문이다.

 

---

 

 

개발자처럼 사용해보기

1. svg 파일을 컴포넌트로 만들어 사용하기

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent:  React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

import {ReactComponent as Delecon} from '@assets/svg/deleteIcon.svg';

const DeleteIconComponent = () => {
  return <DeleteIcon /> 
}

 

 

 

2. .env 파일 타입 정의할 때 사용하기

- typescript를 사용하면 env 파일을 읽어올 수 없다.

- 만약 vite를 사용한다면 ImportMeta를 정의해줘야 한다. 만약 여기서 자동완성까지 가능하게 하면 개발 생산성을 향상시킬 수 있다.

declare global {
  interface ImportMetaEnv {
      VITE_BASE_URL: string;
      VITE_BACK_URL: string;
      VITE_KAKAO_KEY: string;
      VITE_KAKAO_REST_API: string;
      VITE_NAVER_CLIENT_ID: string;
    
    reandly env: ImportMetaEnv
  }

- 위 코드에서는 ImportMetaEnv를 정의해둠으로서 자동완성이 가능하게 변경해준 것이다.

 

 

- 구현 없이 타입만 모아놓은 코드를 ambient라고 하며 declare로 선언된 타입은 JS로 컴파일되지 않는다.

- 컴파일러에게 declare로 선언된 변수 또는 함수들을 이미 존재한다고 알리는 것이다.

var num = 10;
var profile = {name: 'kim'};

declare let num: number; //declare로 변수가 이미 존재한다는 것을 알린다.
console.log(num + 1);

 

 

---

 

 

declare로 타입을 알리는 경우는 크게 3가지로 나뉜다.

 

✔ namespace

- namespace를 쓰면 타입을 그룹화해서 사용할 수 있다.

- React안에도 declare namespaceReact라고 되어 있고 안에 리액트 관련된 여러가지 타입이 명시되어 있다.

declare namespace D3 {
    export interface Selectors {
        select: {
            (selector: string): Selection;
            (element: EventTarget): Selection;
        };
    }
    export interface Event {
        x: number;
        y: number;
    }
    export interface Base extends Selectors {
        event: Event;
    }
}
declare var d3: D3.Base;

 

 

✔ module 🟡

-d.ts라는 파일 안에 주로 선언된다. 이때 root에 d.ts를 만들고 module을 선언하면 전역에서 사용가능하다.

- 말 그대로 모듈이기 때문에 import해서 다른 곳에서 사용 가능하다. admin 만들 때 style.d.ts를 root에 만들어놓고 사용한 것도 이 때문이다.

 

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    flexCenter: ThemedCssFunction;
    flexColumn: ThemedCssFunction;
    gridMax: '1440px';
    white: '#ffffff';
    offwhite: '#f0f0f0';
   }
 }
 
 import {DefaultTheme} from 'styled-components';
 
 const Theme: DefaultTheme = {
   flexCenter: css`
     display: ...
   }

 

 

✔  global

- import / export 구문 없이도 전역으로 사용할 수 있는 특별한 개체

declare global {
  namespace JSX {
    interface IntrinsicAttributes {
      css?: CSSProp;
    }
  }
}

 

 

 

✔ function / variable

function.d.ts

type SomeType = {
  a: number,
  b: string
}

declare function PromiseAll<T extends any[]>(values: reandonly [...T]): Promise<{
  [key in keyof T]: Awaited<T[key]>
}>

declare const a:SomeType

// PromiseAll.ts
const PromiseAll([1,2,Promise.resolve(3)] as const) // Promise<[1,2,number]>

 

 

 

 

 

 

참고자료1

참고자료2