react + typescript
환경으로 설정한 프로젝트에서 리덕스 devtools를 설정할 때 오류가 발생했다.
Property '__REDUX_DEVTOOLS_EXTENSION__' does not exist on type 'Window & typeof globalThis'.
TypeScript 컴파일러가 'REDUX_DEVTOOLS_EXTENSION' 속성이 Window
or globalThis
타입에 존재하지 않는다는 것을 알려주고 있다.
이 에러는 Redux 개발 도구를 사용할 때 발생할 수 있는데 Redux 개발 도구는 브라우저 환경에서 작동하며
'REDUX_DEVTOOLS_EXTENSION' 이라는 전역 변수를 제공한다.
이 변수를 사용하여 Redux Store를 구성하고, 개발 도구를 연결할 수 있다.
이 문제를 해결하기 위해 코드에 다음과 같은 코드를 추가하여
REDUX_DEVTOOLS_EXTENSION 변수가 존재하는지 확인해볼 수 있다.
declare global {
interface Window {
__REDUX_DEVTOOLS_EXTENSION__?: typeof compose;
}
}
위 코드는 Window
인터페이스를 확장하여 REDUX_DEVTOOLS_EXTENSION 속성을 선택적으로 추가합니다.
이렇게 하면, TypeScript 컴파일러가 해당 속성이 존재하는 것으로 간주하여 에러를 방지할 수 있다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
applyMiddleware,
compose,
legacy_createStore as createStore,
} from 'redux';
import { Provider } from 'react-redux';
import PromiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducer';
import App from './App';
declare global {
interface Window {
__REDUX_DEVTOOLS_EXTENSION__?: typeof compose;
}
}
const createStoreWithMiddleware = applyMiddleware(
PromiseMiddleware,
ReduxThunk
)(createStore);
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<Provider
store={createStoreWithMiddleware(
Reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
)}
>
<App />
</Provider>
</React.StrictMode>
);