Can I have one TypeScript Reducer with JavaScript Reducers in my combineReducers?

Question

export default combineReducers({
todosReducer,
calculatorReducer,
dateReducer,
});

I am trying to integrate TypeScript into part of my large codebase. In the example above imagine the first two reducers are JavaScript and the last is TypeScript. The code editor seems to suggest I need the file to be TypeScript but when I do this I get errors on my imports and it won't compile.

import todosReducer from './todosReducer';
import calculatorReducer from './calculatorReducer';
import dateReducer from './dateReducer';

It seems to then want me to convert the two JavaScript reducers to TypeScript. This isn't practical as I only want to keep the two JavaScript reducers as JavaScript for now. If I leave the file as JavaScript, then I get compilation errors. I've been able to get TypeScript to compile fine and render stuff to the screen but just integrating with reducers seems to be a problem.

Can I have one TypeScript Reducer with JavaScript Reducers in my combineReducers and if so, how?

ps. the above is just an example the actual combineReducers has 15 or so reducers in it and converting them all now is not practical.

Answer 1

You should be able to have JS + TS. Make sure you have that option enabled on your tsconfig.json : {"allowJs": true} https://www.typescriptlang.org/docs/handbook/compiler-options.html

Edit : also make sure your bundler can resolve both .ts and .js extensions. You can test to add it on your imports to make sure.