Use TypeScript by default for new applications #35165

NickGerleman · 2022-11-01T21:13:03Z

Summary

This change moves the default new application template from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types.  This is largely derived from @react-native-community/react-native-template-typescript, maintained by @radko93, with a couple of changes. 

Updated @types/* devDependencies to match bumped libraries (e.g. Jest 26 to 20).
Removes @types/react-native
Removed explicit moduleFileExtensions to Jest config in package.json (TS and TSX and added by default in current versions)
Removes overrides to eslint config to disable no-shadow and no-undef, since this was fixed in the underlying eslint config with Fix eslint no-shadow issue with TypeScript enums #32644 and Disable ESLint no-undef for TypeScript files #32655
Re-translated App.js to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged)
Aligns completely to @tsconfig/react-native maintained configuration (We no longer have the opinionated override of skipLibCheck). The important settings are that strict is enabled for, but allowJS is also enabled to let users import JS modules without anything unexpected. esModuleInterop is enabled, which is needed for consistency with Babel import transformations used by Metro.

Consistent with our current documentation built against the community template, tsc will typecheck your code without emitting(building) anything.

 
Changelog:
[General][Changed] - Use Vanilla JS in the App Template

Test Plan

Added usage of tsc and jest when validating a newly built app. Passes in CircleCI test_js job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get).

facebook-github-bot · 2022-11-01T21:13:32Z

This pull request was exported from Phabricator. Differential Revision: D40911951

NickGerleman · 2022-11-01T21:35:56Z

Need to remove end to end app tests which flow check, and see if we can add TS to this.

analysis-bot · 2022-11-01T21:37:51Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	6,992,208	+0
android	hermes	armeabi-v7a	6,368,750	+0
android	hermes	x86	7,404,900	+0
android	hermes	x86_64	7,268,908	+0
android	jsc	arm64-v8a	8,856,021	+0
android	jsc	armeabi-v7a	7,594,539	+0
android	jsc	x86	8,913,766	+0
android	jsc	x86_64	9,397,123	+0

Base commit: 5d26cea
Branch: main

analysis-bot · 2022-11-01T22:09:28Z

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: b5ea5a2
Branch: main

pull-bot · 2022-11-01T22:18:58Z

PR build artifact for 03825f4 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-01T22:21:09Z

PR build artifact for 03825f4 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

github-actions · 2022-11-02T05:51:58Z

	Warnings
⚠️	scripts/run-ci-e2e-tests.js#L22 - scripts/run-ci-e2e-tests.js line 22 – 'rm' is assigned a value but never used. (no-unused-vars)

Generated by 🚫 dangerJS against f739945

facebook-github-bot · 2022-11-02T07:50:09Z

@NickGerleman has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

facebook-github-bot · 2022-11-02T08:19:29Z

This pull request was exported from Phabricator. Differential Revision: D40911951

Summary: This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This is largely derived from [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript), maintained by radko93, with a couple of changes. 1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20). 2. Removes `types/react-native` 3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions) 4. Removes overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655 5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged) 6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything. I discovered through this change that the way 'Utilities' is imported in typings doesn't seem to work in the template app use-case (but works in the RN repo?). Fixed up those imports. We also partially revert facebook@f49b251 which deleted typings. Checking to make sure we keep these in the appropriate place in the future. [Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup. Changelog: [General][Changed] - Use Vanilla JS in the App Template Pull Request resolved: facebook#35165 Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get). Differential Revision: D40911951 Pulled By: NickGerleman fbshipit-source-id: a989523e99ad0045ab4d345aeb2481ef3ca958ca

Summary: This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This is largely derived from [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript), maintained by radko93, with a couple of changes. 1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20). 2. Removes `types/react-native` 3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions) 4. Removes overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655 5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged) 6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything. I discovered through this change that the way 'Utilities' is imported in typings doesn't seem to work in the template app use-case (but works in the RN repo?). Fixed up those imports. We also partially revert facebook@f49b251 which deleted typings. Checking to make sure we keep these in the appropriate place in the future. [Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup. Changelog: [General][Changed] - Use Vanilla JS in the App Template Pull Request resolved: facebook#35165 Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get). Differential Revision: D40911951 Pulled By: NickGerleman fbshipit-source-id: 81136e2aa2602d074107e1fbe8110498406e6ac9

facebook-github-bot · 2022-11-02T08:27:46Z

This pull request was exported from Phabricator. Differential Revision: D40911951

Summary: This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This is largely derived from [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript), maintained by radko93, with a couple of changes. 1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20). 2. Removes `types/react-native` 3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions) 4. Removes overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655 5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged) 6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything. I discovered through this change that the way 'Utilities' is imported in typings doesn't seem to work in the template app use-case (but works in the RN repo?). Fixed up those imports. We also partially revert facebook@f49b251 which deleted typings. Checking to make sure we keep these in the appropriate place in the future. [Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup. Changelog: [General][Changed] - Use Vanilla JS in the App Template Pull Request resolved: facebook#35165 Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get). Differential Revision: D40911951 Pulled By: NickGerleman fbshipit-source-id: 05bed911249583b02d2c180a27f955e2e36c0cc4

facebook-github-bot · 2022-11-02T08:35:26Z

This pull request was exported from Phabricator. Differential Revision: D40911951

pull-bot · 2022-11-02T09:39:21Z

PR build artifact for e286da2 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-02T09:40:17Z

PR build artifact for e286da2 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

Summary: This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This used [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript) as a main reference, maintained by radko93. A few things are different: 1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20). 2. Removed `types/react-native` 3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions) 4. Removed overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655 5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged) 6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything. [Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup. Changelog: [General][Changed] - Use TypeScript by default for new applications Pull Request resolved: facebook#35165 Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get). Reviewed By: cortinico Differential Revision: D40911951 Pulled By: NickGerleman fbshipit-source-id: 08d4624bc08163c7dc1272f605bc3a8e9a89173b

facebook-github-bot · 2022-11-02T22:08:43Z

This pull request was exported from Phabricator. Differential Revision: D40911951

pull-bot · 2022-11-02T22:37:03Z

PR build artifact for f739945 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-02T22:41:16Z

PR build artifact for f739945 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

react-native-bot · 2022-11-03T04:45:05Z

This pull request was successfully merged by @NickGerleman in aaf1990.

^{When will my fix make it into a release? | Upcoming Releases}

Summary: This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This used [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript) as a main reference, maintained by radko93. A few things are different: 1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20). 2. Removed `types/react-native` 3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions) 4. Removed overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655 5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged) 6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything. [Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup. Changelog: [General][Changed] - Use TypeScript by default for new applications Pull Request resolved: facebook#35165 Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get). Reviewed By: cortinico Differential Revision: D40911951 Pulled By: NickGerleman fbshipit-source-id: 15994534235695e91cf994ad06ba2183dfc89a50

facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Facebook Partner: Facebook Partner fb-exported labels Nov 1, 2022

NickGerleman marked this pull request as draft November 1, 2022 22:31

NickGerleman changed the title ~~Use Vanilla JS in the New App Template~~ Use TypeScript in the New App Template Nov 1, 2022

NickGerleman changed the title ~~Use TypeScript in the New App Template~~ Use TypeScript by default for new applications Nov 2, 2022

NickGerleman force-pushed the export-D40911951 branch 2 times, most recently from f9e373c to 7083d65 Compare November 2, 2022 07:47

NickGerleman force-pushed the export-D40911951 branch from 7083d65 to 31f03ea Compare November 2, 2022 08:19

NickGerleman marked this pull request as ready for review November 2, 2022 08:23

NickGerleman force-pushed the export-D40911951 branch from 31f03ea to e0d80f1 Compare November 2, 2022 08:27

NickGerleman force-pushed the export-D40911951 branch from e0d80f1 to e286da2 Compare November 2, 2022 08:35

NickGerleman marked this pull request as draft November 2, 2022 09:42

NickGerleman force-pushed the export-D40911951 branch from e286da2 to f739945 Compare November 2, 2022 22:08

NickGerleman marked this pull request as ready for review November 2, 2022 22:13

facebook-github-bot closed this in aaf1990 Nov 3, 2022

react-native-bot added the Merged This PR has been merged. label Nov 3, 2022

AugustinLF mentioned this pull request Nov 3, 2022

Call for maintainers: Flow types callstack/react-native-testing-library#1208

Closed

leotm mentioned this pull request Mar 2, 2023

Type checking library declaration files MetaMask/metamask-mobile#5881

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use TypeScript by default for new applications #35165

Use TypeScript by default for new applications #35165

NickGerleman commented Nov 1, 2022 •

edited

facebook-github-bot commented Nov 1, 2022

NickGerleman commented Nov 1, 2022

analysis-bot commented Nov 1, 2022 •

edited

analysis-bot commented Nov 1, 2022 •

edited

pull-bot commented Nov 1, 2022

pull-bot commented Nov 1, 2022

github-actions bot commented Nov 2, 2022 •

edited

facebook-github-bot commented Nov 2, 2022

facebook-github-bot commented Nov 2, 2022

facebook-github-bot commented Nov 2, 2022

facebook-github-bot commented Nov 2, 2022

pull-bot commented Nov 2, 2022

pull-bot commented Nov 2, 2022

facebook-github-bot commented Nov 2, 2022

pull-bot commented Nov 2, 2022

pull-bot commented Nov 2, 2022

react-native-bot commented Nov 3, 2022

Use TypeScript by default for new applications #35165

Use TypeScript by default for new applications #35165

Conversation

NickGerleman commented Nov 1, 2022 • edited

Summary

Test Plan

facebook-github-bot commented Nov 1, 2022

NickGerleman commented Nov 1, 2022

analysis-bot commented Nov 1, 2022 • edited

analysis-bot commented Nov 1, 2022 • edited

pull-bot commented Nov 1, 2022

pull-bot commented Nov 1, 2022

github-actions bot commented Nov 2, 2022 • edited

facebook-github-bot commented Nov 2, 2022

facebook-github-bot commented Nov 2, 2022

facebook-github-bot commented Nov 2, 2022

facebook-github-bot commented Nov 2, 2022

pull-bot commented Nov 2, 2022

pull-bot commented Nov 2, 2022

facebook-github-bot commented Nov 2, 2022

pull-bot commented Nov 2, 2022

pull-bot commented Nov 2, 2022

react-native-bot commented Nov 3, 2022

NickGerleman commented Nov 1, 2022 •

edited

analysis-bot commented Nov 1, 2022 •

edited

analysis-bot commented Nov 1, 2022 •

edited

github-actions bot commented Nov 2, 2022 •

edited