작업 중 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( ... )
이후 다른 컴포넌트에서 사용해주면 된다.