I've reading that React Native supports Typescript without dependencies like react-native-typescript-transformer. How do I configure it to code using Typescript?
-
1Your title and description are a bit confusing, do you want to know how to add typescript or don't know how to use it? please elaborate.– Haider AliSep 18, 2018 at 17:11
-
I just edited it. Check it, please.– Isaac FerreiraSep 18, 2018 at 17:19
-
1@IsaacFerreira is there any particular reason you don't want additional dependencies? Because one way or another you will need to add some.– Matei RaduSep 18, 2018 at 17:21
-
1Yes. If React Native has a built-in support to Typescript, I do not want to install unecessary dependencies.– Isaac FerreiraSep 18, 2018 at 17:24
1 Answer
Since 0.57.0
With the upgrade to Babel v7, Typescript is supported but you will still need to make some changes to your application:
- Install type definition dependencies
@types/jest @types/react @types/react-native @types/react-test-renderer
- Change your
.js
files to.ts
or.tsx
depending on whether such files contain JSX or not. Note: keepindex.js
as is, otherwise Metro builder will fail since it is still not updated to expect a.ts
entry file. - You will need to add module declarations for binary assets like images, videos and json files for Typescript to understand how to import them (example here).
For testing, Jest must be made aware of Typescript by adding the following to its configuration section in
package.json
:"jest": { "preset": "react-native", "moduleFileExtensions": [ "ts", "tsx", "js" ], "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$" }
Be aware that with this setup Babel just transforms Typescript to Javascript, it does not perform type-checking.
Also, expect possible issue since it is the first React Native release to support Typescript. My recommendation is to still follow the instructions below until things stabilize with time and patches.
Before 0.57.0
React Native does not offer first-party Typescript support. Instead, it offers Flow support out-of-the-box if you want types without having to add additional dependencies (other than flow-bin
of course).
If you necessarily want Typescript, you will need to add some dependencies one way or another, depending on the setup you would eventually pick to use. There is a React Native blog post Using Typescript with React Native that explains one way to add Typescript.
-
3
Typescript is supported by default in 0.57. No transformers needed.
github.com/ds300/react-native-typescript-transformer/issues/… Sep 19, 2018 at 0:49 -
Do you know how to get rid of it? I don't want to use Typescript. And just letting it be I get all types of linter errors. Like with the
type Props = {};
I get the error: >Typ aliases can only be used in TS Files Oct 23, 2018 at 11:40 -
-
Yes indeed. And it freaks out about typescript created from
react-native-cli
Oct 24, 2018 at 15:22 -
1@MateiRadu I wrote an updated blog post, since the one you linked is outdated. medium.com/@jan.hesters/… Feb 11, 2019 at 8:31