https://github.com/orta/react-native-45-typescript-example

An example of taking react-native's default template and making it work with typescript
https://github.com/orta/react-native-45-typescript-example

Last synced: about 2 months ago
JSON representation

An example of taking react-native's default template and making it work with typescript

• Host: GitHub
• URL: https://github.com/orta/react-native-45-typescript-example
• Owner: orta
• Created: 2017-06-11T09:31:20.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2017-06-11T09:54:15.000Z (almost 7 years ago)
• Last Synced: 2024-01-22T03:44:57.830Z (4 months ago)
• Language: JavaScript
• Size: 129 KB
• Stars: 14
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• Awesome-React-Native-Education - react-native-45-typescript-example

README

        
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:

```json

{

  "compilerOptions": {

    "target": "es5",  

    "module": "commonjs",

    "jsx": "react", 

    "strict": true  

  }

}

```

* create - rn-cli.config.js

```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 case `home.tsx`

* `react-native run-ios` to start it up

---

Making it feel good:

* `yarn add @types/react-native --dev`