Search code examples
typescriptreact-nativeexposwagger-codegen

Compile TypeScript with react-native-typescript-transformer?


Since Expo SDK 31 there is TypeScript support integrated. That’s great.

However, as far as I can tell, it uses babel-typescript. For my project, running on Expo SDK 33, I need to use react-native-typescript-transformer instead. Is this possible? How I can configure this change?

PS: The reason I need to use react-native-typescript-transformer is that I need support for TypeScript namespaces and enums. I use swagger-codegen to generate my REST client layer. But all the generators I found use namespaces (and also enums that are not supported either by Babel 7 if I understood well).


Solution

  • Finally figured it out!

    Whenever you build and run your React Native project, a packager starts up called Metro. The packager does a few things, including: combining all your Javascript code into a single file, and translates any Javascript code that your device won’t understand - like JSX and TypeScript (credits to mahdi).

    To hook up and bypass the babel-typescript using react-native-typescript-transformer simply create a file in your project root directory called metro.config.js. Here's the config:

    module.exports = {
        transformer: {
            babelTransformerPath: require.resolve(
                'react-native-typescript-transformer',
            ),
        },
    };
    

    Works on Expo SDK 33 with TypeScript 3.4.5. I managed to finally use swagger-codegen to generate my REST client layer!