This is the minimal possible setup to get a in memory version of React Native working with TypeScript support. The current techniques use a multi-step process, you save -> TypeScript creates JS file -> Babel sees JS file and compiles to ES5. This replaces that with a custom transformer that will either pass the file to Babel or the TypeScript compiler.
If you want to see a non-trivial production version: https://github.com/artsy/emission
This repo is the techniques inside that app replicated against a new project.
Steps required to make this project:
npm install -g react-native-clireact-native init MyProjectcd MyProjectyarn add typescript --devyarn tsc -- --init- change tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"jsx": "react",
"strict": true
}
}- create - rn-cli.config.js
module.exports = {
getSourceExts() {
return ["js", "ts", "tsx"]
},
getTransformModulePath() {
return require.resolve("./transformer")
},
}- create transformer folder, and copy emission files in there (https://github.com/artsy/emission/tree/master/transformer)
- You have to keep
index.ios.jsindex.android.jsto use those to load a TSX component, in this casehome.tsx react-native run-iosto start it up
Making it feel good:
yarn add @types/react-native --dev