Add TypeScript support to React Native #209

LinusU · 2018-07-31T11:23:56Z

Summary

This PR adds support for TypeScript out-of-the-box. Existing codebases should work as before, but React Native should be able to pick up .ts and .tsx files automatically, and transpile them using Babel.

Note that no actual type-checking will be done, this is in line with how the current Flow support is working. The user can run tsc --noEmit to type-check the project.

Test plan

I'm currently working on this. I haven't been able to figure out how to test these changes in a local RN application.

I'll be meeting up with @kelset today, hopefully he can help me with this 💌

With these changes, the following RN project should be able to work without further configuration: https://github.com/LinusU/react-native-babel-typescript-test

kelset · 2018-07-31T12:18:48Z

CI error:

TypeError: /home/circleci/metro/packages/metro/src/commands/serve.js: Duplicate declaration "restart" (This is an error on an internal node. Probably an internal error)

Not sure what this means 🤷‍♂️

Anyway I think that @CompuIves or @rafeca could provide some feedback on this.

LinusU · 2018-07-31T12:35:36Z

Yeah, looked at that as well, and inspecting that file I can only find one declaration of restart 🤔

Won't have much more time during the day to look at this though...

rafeca · 2018-07-31T17:09:17Z

TypeError: /home/circleci/metro/packages/metro/src/commands/serve.js: Duplicate declaration "restart" (This is an error on an internal node. Probably an internal error)

I have a commit that's going to land soon that fixes this error

LinusU · 2018-07-31T17:13:19Z

@rafeca nice! I worked around it in a really strange way: 4e00488

Seems like it's a bug inside of Babel?

codecov-io · 2018-07-31T17:13:20Z

Codecov Report

Merging #209 into master will increase coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #209      +/-   ##
==========================================
+ Coverage   85.46%   85.47%   +<.01%     
==========================================
  Files         134      134              
  Lines        4390     4391       +1     
  Branches      676      677       +1     
==========================================
+ Hits         3752     3753       +1     
  Misses        566      566              
  Partials       72       72

Impacted Files	Coverage Δ
...etro-react-native-babel-preset/src/configs/main.js	`100% <100%> (ø)`	⬆️
packages/metro-config/src/defaults/defaults.js	`100% <100%> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d915cc7...37f2c3c. Read the comment docs.

rafeca · 2018-07-31T17:27:00Z

Yes, it's a bug in babel scope counting (more info) that causes an issue in our inline requires transformer.

I've worked around the issue by disabling the inline requires plugin in our tests (that's fair because we don't use inline requires to transpile Metro)

LinusU · 2018-08-01T11:01:23Z

I've worked around the issue by disabling the inline requires plugin in our tests (that's fair because we don't use inline requires to transpile Metro)

Awesome!

I've rebased on master and the problem went away.

I also changed the approach to be a bit simpler, now the only thing added is an override for .ts and .tsx files. This approach was made possible in v7.0.0-beta.48 of Babel, and we are using a newer version than that.

I've opted to enable JSX in both .ts and .tsx files, since it's enabled for .js files and doesn't require the .jsx file ending. I'd be happy to change this if having it enabled only for .tsx files would be preferable.

LinusU · 2018-08-01T11:13:26Z

If anyone is interested, the size of the two new dependencies are:

plugin-syntax-typescript-7.0.0-beta.54.tgz          1053 bytes
plugin-transform-typescript-7.0.0-beta.54.tgz       3896 bytes

So adding TypeScript support to React Native will only add 4,949 bytes of extra download 😄

rafeca

Thanks a lot for the contribution! I love how simple it's been to add native support for TypeScript 😃

Small note: since we don't use TypeScript internally at FB, we're not going to be able to fully maintain this feature, so I expect you/the community to help here in the future 😄

Something I recommend to do is to add a TypeScript file to the test bundle that we use for our end to end tests: this will prevent TypeScript support from breaking in the future.

rafeca · 2018-08-01T17:20:53Z

packages/metro-react-native-babel-preset/src/configs/main.js

@@ -124,6 +128,14 @@ const getPreset = (src, options) => {
    comments: false,
    compact: true,
    plugins: defaultPlugins.concat(extraPlugins),
+    overrides: [
+      {
+        test: file => isTypeScriptSource(file || 'internal.js'),


Can you make the fileName param in isTypeScriptSource() optional (and check if it's not null there)? This way we can avoid passing the internal.js thingy 😄

Sure thing!

LinusU · 2018-08-01T18:21:23Z

@rafeca Fixed your comment 👌

Some things, just because I'm new to this repo:

I amended my commit instead of pushing a new commit
I used !! since I found that 10 times in the rest of the code, I only found Boolean(...) once
I rebased on master again

Please let me know if you prefer any other style/way of working ☺️

LinusU · 2018-08-01T18:23:21Z

so I expect you/the community to help here in the future

Will absolutely maintain this!

We are going to use this at work so will be able to this during work hours 👍

Something I recommend to do is to add a TypeScript file to the test bundle that we use for our end to end tests: this will prevent TypeScript support from breaking in the future.

Absolutely 🙌

Thanks a lot for the contribution!

Thanks for the comments and quick responses ❤️

rafeca

I amended my commit instead of pushing a new commit

👍

I used !! since I found that 10 times in the rest of the code, I only found Boolean(...) once

💯

I rebased on master again

🥇

rafeca · 2018-08-01T20:12:09Z

packages/metro/src/integration_tests/__tests__/__snapshots__/basic_bundle-test.js.snap

+  var type = 'TypeScript';
+  exports.type = type;
+  var test = true;
+  exports.test = test;


nice!!! 👍

facebook-github-bot

rafeca is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

LinusU · 2018-08-02T08:48:13Z

Thank you for landing this 🚀

LinusU · 2018-08-02T10:48:29Z

@rafeca would it be possible to cut a release, 0.43.3, so that I can easier test this out? Thanks!

rafeca · 2018-08-02T11:06:38Z

yes, I was planning to release 0.43.3 today! 🏃

LinusU · 2018-08-02T13:26:24Z

Awesome 👏 thanks!

emin93 · 2018-08-28T13:26:46Z

Wow this is really great thanks a lot! I just added a note to the TypeScript template (https://github.com/emin93/react-native-template-typescript) that it will be supported out of the box in future React Native versions. 😄

nicolashemonic · 2018-08-30T15:59:10Z

Thanks! Love it!

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jul 31, 2018

LinusU force-pushed the typescript branch from 973b8cb to d06f2e4 Compare July 31, 2018 11:31

LinusU force-pushed the typescript branch from 0c7ce8d to 4e00488 Compare July 31, 2018 17:08

LinusU force-pushed the typescript branch from 4e00488 to aebe24a Compare August 1, 2018 10:44

LinusU changed the title ~~[WIP] Add TypeScript support to React Native~~ Add TypeScript support to React Native Aug 1, 2018

rafeca reviewed Aug 1, 2018

View reviewed changes

Add TypeScript support to React Native

4b030d4

LinusU force-pushed the typescript branch from aebe24a to 4b030d4 Compare August 1, 2018 18:19

Add a TypeScript file to the integration test

37f2c3c

rafeca approved these changes Aug 1, 2018

View reviewed changes

facebook-github-bot reviewed Aug 1, 2018

View reviewed changes

facebook-github-bot closed this in 196fda1 Aug 2, 2018

LinusU mentioned this pull request Aug 6, 2018

React Native 0.56.rc-5 no longer works without Flow facebook/react-native#20030

Closed

bsr203 referenced this pull request in react-native-community/react-native-template-typescript Oct 4, 2018

added compatibility with rn 0.57+

da09961

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add TypeScript support to React Native #209

Add TypeScript support to React Native #209

LinusU commented Jul 31, 2018 •

edited

Loading

kelset commented Jul 31, 2018 •

edited

Loading

LinusU commented Jul 31, 2018

rafeca commented Jul 31, 2018

LinusU commented Jul 31, 2018

codecov-io commented Jul 31, 2018 •

edited

Loading

rafeca commented Jul 31, 2018

LinusU commented Aug 1, 2018 •

edited

Loading

LinusU commented Aug 1, 2018

rafeca left a comment

rafeca Aug 1, 2018

LinusU Aug 1, 2018

LinusU commented Aug 1, 2018

LinusU commented Aug 1, 2018

rafeca left a comment

rafeca Aug 1, 2018

facebook-github-bot left a comment

LinusU commented Aug 2, 2018

LinusU commented Aug 2, 2018

rafeca commented Aug 2, 2018

LinusU commented Aug 2, 2018

emin93 commented Aug 28, 2018 •

edited

Loading

nicolashemonic commented Aug 30, 2018

Add TypeScript support to React Native #209

Add TypeScript support to React Native #209

Conversation

LinusU commented Jul 31, 2018 • edited Loading

kelset commented Jul 31, 2018 • edited Loading

LinusU commented Jul 31, 2018

rafeca commented Jul 31, 2018

LinusU commented Jul 31, 2018

codecov-io commented Jul 31, 2018 • edited Loading

Codecov Report

rafeca commented Jul 31, 2018

LinusU commented Aug 1, 2018 • edited Loading

LinusU commented Aug 1, 2018

rafeca left a comment

Choose a reason for hiding this comment

rafeca Aug 1, 2018

Choose a reason for hiding this comment

LinusU Aug 1, 2018

Choose a reason for hiding this comment

LinusU commented Aug 1, 2018

LinusU commented Aug 1, 2018

rafeca left a comment

Choose a reason for hiding this comment

rafeca Aug 1, 2018

Choose a reason for hiding this comment

facebook-github-bot left a comment

Choose a reason for hiding this comment

LinusU commented Aug 2, 2018

LinusU commented Aug 2, 2018

rafeca commented Aug 2, 2018

LinusU commented Aug 2, 2018

emin93 commented Aug 28, 2018 • edited Loading

nicolashemonic commented Aug 30, 2018

LinusU commented Jul 31, 2018 •

edited

Loading

kelset commented Jul 31, 2018 •

edited

Loading

codecov-io commented Jul 31, 2018 •

edited

Loading

LinusU commented Aug 1, 2018 •

edited

Loading

emin93 commented Aug 28, 2018 •

edited

Loading