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-cli
react-native init MyProject
cd MyProject
yarn add typescript --dev
yarn 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.js
index.android.js
to use those to load a TSX component, in this casehome.tsx
react-native run-ios
to start it up
Making it feel good:
yarn add @types/react-native --dev