create-react-app - typescript 에서 global.d.ts 적용하기

서론

작업 중 String 객체를 확장시켜야 하는 경우가 생겼다.
기존 javascript에서는 단순히 String.prototype.SomeFunction = function() { ... } 으로 하면 되지만, typescript에서는 typescript typechecker가 엄격하게 관리를 해 type을 찾을 수 없다고 해버린다.

따라서 확장하려는 함수 또는 변수를 먼저 d.ts 파일에 선언해줘야 하는데, 보통은 아래와 같은 방식으로 설정한다고 한다.

// global.d.ts에서 작성

declare global {
  interface String {
    someFunction(): someType;
  }
}

# tsconfig.json 에 d.ts 파일 추가
{
  "compilerOptions": {
    ...
    "typeRoots": [
      "./node_modules/@types",
      "@types",
      "global.d.ts" # global.d.ts path 입력
    ]
    ...
  }
}

해결 😂

create-react-app(이하 CRA)로 진행하고 있는데 여기에서는 적용이 안된다..
이것저것 해봤는데도 안되길래 계속 구글링을 하다가, 어느 한 포스트에 친절하게 설명해준 내용으로 시도해보니 되더라..!
(출처 : Jaewook Ann 님의 포스트)

결론부터 얘기하자면, CRA에서는 ./src 하위에 react-app-env.d.ts 파일이 따로 생성이 된다.
해당 파일에 선언을 해주면 되는데, 주의할 점이 있다면 declare global {...} block을 빼야 한다.
react-app-env.d.ts 에 아래와 같이 넣어주면 된다.

/// <reference types="react-scripts" />

interface String {
  someFunction(): someType;
}

이후 ts/tsx 에서 확장한 함수/변수를 구현해주면 된다.

// someFile.ts 
String.prototype.someFunction = function () { ... }

나의 경우 전역적으로 설정하고 싶어서, ./src/global.ts 안에 위 선언부분을 작성해주고, index.tsx 에서 import 해주었다.

import React from 'react';
import ReactDOM from 'react-dom';
...
import './global' // global.ts import

...
ReactDom.render( ... )

이후 다른 컴포넌트에서 사용해주면 된다.