How to disable Babel 7 for Typescript

[chawax]

Hi,

I try to migrate a project from React Native 0.55.4 to 0.57.4. The project uses Typescript and I have problems because Babel 7 doesn't support namespaces and enums. The problem is that they are used in code generated from Swagger. So I have no easy way (and no time) to change this.

From what I understood, Babel 7 now compiles Typescript while it was not the case before. Is there a way to configure Metro bundler so that it doesn't use Babel 7 to compile Typescript ? So that it could work the way it did before ?

Thanks in advance,

[newyankeecodeshop]

We have been using TypeScript with RN by having the TypeScript compiler compile our /src directory into /build, and then have the RN index.js import the App component from build/App. That way, the RN packager only ever sees compiled TypeScript artifacts. We are not yet on RN 0.57 so can't try the new integration, but having the TypeScript compiler generate full artifacts is something we might keep doing even after upgrading. As you point out, it means we can use all the features of TypeScript.

[slorber]

Hi,

Just want to mention that babel7 does not compile TS out of the box, it needs a preset on your side.
And it actually does not really compile, it just is able to consume the ts files directly by stripping type informations. If you want typecheck, you still need to run tsc or check errors in your ide. The only major difference imho is that you don't need to output first js files before feeding Metro with them and Metro can use directly your ts files.

Here is a sample integration I've made: https://github.com/slorber/expo-typescript

Note my current Expo-ts app has enums and it works fine.

[chawax]

I solved the problem by changing the rn-cli.config.js file :

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

[swissmanu]

latest RN (tested with react-native@0.59) needs the react-native-typescript-transformer to be configured within the metro.config.js file. see ds300/react-native-typescript-transformer#90 (comment) for further information.

with this, this issue here can potentially be closed.