Use TypeScript by default for new applications

scripts/run-ci-e2e-tests.js

@@ -89,19 +89,9 @@ try {
   exec(`rsync -a ${ROOT}/template ${REACT_NATIVE_TEMP_DIR}`);
   cd(REACT_NATIVE_APP_DIR);
 
-  const METRO_CONFIG = path.join(ROOT, 'metro.config.js');
-  const RN_GET_POLYFILLS = path.join(ROOT, 'rn-get-polyfills.js');
-  const RN_POLYFILLS_PATH = 'packages/polyfills/';
-  exec(`mkdir -p ${RN_POLYFILLS_PATH}`);
-
-  cp(METRO_CONFIG, '.');
-  cp(RN_GET_POLYFILLS, '.');
-  exec(
-    `rsync -a ${ROOT}/${RN_POLYFILLS_PATH} ${REACT_NATIVE_APP_DIR}/${RN_POLYFILLS_PATH}`,
-  );
-  mv('_flowconfig', '.flowconfig');
-  mv('_watchmanconfig', '.watchmanconfig');
   mv('_bundle', '.bundle');
+  mv('_eslintrc.js', '.eslintrc.js');
+  mv('_watchmanconfig', '.watchmanconfig');
 
   describe('Install React Native package');
   exec(`npm install ${REACT_NATIVE_PACKAGE}`);
@@ -267,6 +257,7 @@ try {
       exitCode = 1;
       throw Error(exitCode);
     }
+
     describe('Test: Verify packager can generate an iOS bundle');
     if (
       exec(
@@ -277,12 +268,17 @@ try {
       exitCode = 1;
       throw Error(exitCode);
     }
-    describe('Test: Flow check');
-    // The resolve package included a test for a malformed package.json (see https://github.com/browserify/resolve/issues/89)
-    // that is failing the flow check. We're removing it.
-    rm('-rf', './node_modules/resolve/test/resolver/malformed_package_json');
-    if (exec(`${ROOT}/node_modules/.bin/flow check`).code) {
-      echo('Flow check failed.');
+
+    describe('Test: TypeScript typechecking');
+    if (exec('yarn tsc').code) {
+      echo('Typechecking errors were found');
+      exitCode = 1;
+      throw Error(exitCode);
+    }
+
+    describe('Test: Jest tests');
+    if (exec('yarn test').code) {
+      echo('Jest tests failed');
       exitCode = 1;
       throw Error(exitCode);
     }

template/App.js → template/App.tsx

@@ -3,11 +3,10 @@
  * https://github.com/facebook/react-native
  *
  * @format
- * @flow strict-local
  */
 
 import React from 'react';
-import type {Node} from 'react';
+import type {PropsWithChildren} from 'react';
 import {
   SafeAreaView,
   ScrollView,
@@ -26,12 +25,11 @@ import {
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 
-type SectionProps = {
-  title: string,
-  children: Node,
-};
+type SectionProps = PropsWithChildren<{
+  title: string;
+}>;
 
-function Section({children, title}: SectionProps): Node {
+function Section({children, title}: SectionProps): JSX.Element {
   const isDarkMode = useColorScheme() === 'dark';
   return (
     <View style={styles.sectionContainer}>
@@ -57,7 +55,7 @@ function Section({children, title}: SectionProps): Node {
   );
 }
 
-function App(): Node {
+function App(): JSX.Element {
   const isDarkMode = useColorScheme() === 'dark';
 
   const backgroundStyle = {

template/_eslintrc.js

@@ -1,4 +1,6 @@
 module.exports = {
   root: true,
   extends: '@react-native-community',
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
 };

template/package.json

@@ -5,9 +5,9 @@
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
+    "lint": "eslint .",
     "start": "react-native start",
-    "test": "jest",
-    "lint": "eslint ."
+    "test": "jest"
   },
   "dependencies": {
     "react": "18.2.0",
@@ -17,11 +17,18 @@
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "^3.0.0",
+    "@tsconfig/react-native": "^2.0.2",
+    "@types/jest": "^29.2.1",
+    "@types/react": "^18.0.24",
+    "@types/react-test-renderer": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
     "babel-jest": "^29.2.1",
     "eslint": "^8.19.0",
     "jest": "^29.2.1",
     "metro-react-native-babel-preset": "0.73.3",
-    "react-test-renderer": "18.2.0"
+    "react-test-renderer": "18.2.0",
+    "typescript": "^4.8.3"
   },
   "jest": {
     "preset": "react-native"

template/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@tsconfig/react-native/tsconfig.json"
+}