1

I've reading that React Native supports Typescript without dependencies like react-native-typescript-transformer. How do I configure it to code using Typescript?

4
  • 1
    Your 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 Ali
    Sep 18, 2018 at 17:11
  • I just edited it. Check it, please. Sep 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 Radu
    Sep 18, 2018 at 17:21
  • 1
    Yes. If React Native has a built-in support to Typescript, I do not want to install unecessary dependencies. Sep 18, 2018 at 17:24

1 Answer 1

6

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: keep index.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.

6
  • 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
  • @GeraltDieSocke are you using Visual Studio Code?
    – Matei Radu
    Oct 23, 2018 at 22:16
  • 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/…
    – J. Hesters
    Feb 11, 2019 at 8:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.