Seamlessly use TypeScript with react-native >= 0.45
yarn add --dev react-native-typescript-transformer typescript
Make sure your tsconfig.json has these compiler options:
{
"compilerOptions": {
"target": "es2015",
"jsx": "react",
"noEmit": true,
"moduleResolution": "node",
},
"exclude": [
"node_modules"
]
}
See tsconfig.json Notes for more advanced configuration details.
Add this to your rn-cli.config.js (make one if you don't have one already):
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer')
},
getSourceExts() {
return ['ts', 'tsx'];
}
}
If you need to run the packager directly from the command line, run the following
react-native start --transformer node_modules/react-native-typescript-transformer/index.js --sourceExts ts,tsx
Note that the platform-specific index files (index.ios.js, index.android.js, etc) still need to be .js files, but everything else can be TypeScript.
You probably want typings for react and react-native
yarn add --dev @types/react @types/react-native
Note that if you run yarn tsc
it will act as a type checker rather than a compiler. Run it with --watch
to catch dev-time errors in all files, not just the one you're editing.
yarn add tslib
in tsconfig.json
{
"compilerOptions": {
+ "importHelpers": true,
}
}
Doing this should reduce your bundle size. See this blog post for more details.
Absolute paths needs to have support from both the TypeScript compiler and the react-native packager.
This section will show you how to work with project structures like this:
<rootDir>
├── src
│ ├── package.json
│ ├── App.tsx
│ ├── components
│ │ ├── Banana.tsx
│ ├── index.tsx
├── index.ios.js
├── package.json
├── tsconfig.json
Where you want to be able to import Banana from 'src/components/Banana'
from any .ts(x) file, regardless of its place in the directory tree.
In tsconfig.json
:
{
"compilerOptions": {
+ "baseUrl": "."
}
}
For react-native you need to add one or more package.json
files. These only need to contain the "name"
field, and should be placed into any folders in the root of your project that you want to reference with an absolute path. The "name"
field's value should be the name of the folder. So for me, I just added one file at src/package.json
with the contents {"name": "src"}
.
If you use Jest as a test runner, add the following in your root package.json:
{
"jest" {
+ "modulePaths": ["<rootDir>"]
}
}
-
If you enable synthetic default imports with the
"allowSyntheticDefaultImports"
flag, be sure to set"module"
to something like "es2015" to allow the es6 import/export syntax to pass through the TypeScript compiler untouched. Then Babel can compile those statements while emitting the necessary extra code to make synthetic default imports work properly.This is neccessary until TypeScript implements suport for synthetic default imports in emitted code as well as in the type checker. See Microsoft/TypeScript#9562.
-
"target"
can be anything supported by your project's Babel configuration. -
"jsx"
can also be"react-native"
or"preserve"
, which are functionally identical in the context of a react-native-typescript-transformer project. In this case, the JSX syntax is compiled by Babel instead of TypeScript -
The source map options are not useful
-
You probably want to specify some base typings with the
"lib"
option. I've had success with the following:{ "compilerOptions": { + "lib": [ "dom", "es2015", "es2016" ], } }
Follow the react-native setup guide for ts-jest.
Alternatively, if you want to use exactly the same transformation code for both Jest and react-native check out this comment.
Note that there have been no reports of problems arising from differences between code compiled by the ts-jest
transformer and code compiled by react-native-typescript-transformer
. Additionally, ts-jest
takes care of a lot of edge cases and is more configurable.
If you're transitioning an app from tsc
to react-native-typescript-transformer
, you might see runtime errors which involve imported modules being undefined
. You almost certainly have cyclical inter-module dependencies which manifest during your app's initialization. e.g. if ModuleA is undefined
in ModuleB it means that ModolueA (in)directly imports ModuleB.
tsc
seems to be able to mitigate some instances of these cyclical dependencies when used as a whole-app compiler. Unfortunately the module-at-a-time compilation approach that react-native's bundler supports does not permit the same optimizations.
Be especially careful of "umbrella export" files which can easily introduce these cycles.
MIT