chore(build): add typecheck step to react and react-router

Author: ShaneK

.github/workflows/actions/build-angular-server/action.yml

@@ -23,6 +23,9 @@ runs:
       run: npm run lint
       shell: bash
       working-directory: ./packages/angular-server
+    # No Typecheck step here. Unlike the rollup-built packages, which report
+    # type errors as warnings and still exit 0, ng-packagr fails the build on
+    # them, so the Build step below already covers this.
     - name: 🏗️ Build
       run: npm run build.prod
       shell: bash

.github/workflows/actions/build-angular/action.yml

@@ -23,6 +23,9 @@ runs:
       run: npm run lint
       shell: bash
       working-directory: ./packages/angular
+    # No Typecheck step here. Unlike the rollup-built packages, which report
+    # type errors as warnings and still exit 0, ng-packagr fails the build on
+    # them, so the Build step below already covers this.
     - name: 🏗️ Build
       run: npm run build
       shell: bash

.github/workflows/actions/build-react-router/action.yml

@@ -28,6 +28,12 @@ runs:
       run: npm run lint
       shell: bash
       working-directory: ./packages/react-router
+    # The rollup build reports type errors as warnings and still succeeds, so
+    # this step is what keeps the package type-clean.
+    - name: 🔎 Typecheck
+      run: npm run typecheck
+      shell: bash
+      working-directory: ./packages/react-router
     - name: 🏗️ Build
       run: npm run build
       shell: bash

.github/workflows/actions/build-react/action.yml

@@ -23,6 +23,12 @@ runs:
       run: npm run lint
       shell: bash
       working-directory: ./packages/react
+    # The rollup build reports type errors as warnings and still succeeds, so
+    # this step is what keeps the package type-clean.
+    - name: 🔎 Typecheck
+      run: npm run typecheck
+      shell: bash
+      working-directory: ./packages/react
     - name: 🏗️ Build
       run: npm run build
       shell: bash

docs/CONTRIBUTING.md

@@ -323,7 +323,7 @@ Refer to [Ionic's E2E testing guide](/core/src/utils/test/playwright/docs/README
   - Vue: [`/packages/vue/src`](/packages/vue/src)
 2. Make your changes to the files. If the change is overly complex or out of the ordinary, add comments so we can understand the changes.
 3. Run lint on the directory and make sure there are no errors.
-4. For Vue, run `npm run typecheck` in `/packages/vue` and `/packages/vue-router`. The rollup build only reports type errors as warnings, so a passing build does not mean the types are clean.
+4. For React and Vue, run `npm run typecheck` in each package you changed (`/packages/react`, `/packages/react-router`, `/packages/vue`, `/packages/vue-router`). These packages build with rollup, which only reports type errors as warnings, so a passing build does not mean the types are clean. Angular has no `typecheck` script because ng-packagr already fails the build on type errors.
 5. Build the project.
 6. After the build is finished, commit the changes. Please follow the [commit message format](#commit-message-format) for every commit.
 7. [Submit a Pull Request](#submit-pull-request) of your changes.

docs/react-router/testing.md

@@ -2,6 +2,10 @@
 
 Ionic Framework supports multiple versions of React Router. As a result, we need to verify that Ionic works correctly with each of these React Router versions.
 
+## Type Checking
+
+Run `npm run typecheck` in `packages/react-router` to check types. The rollup build only reports type errors as warnings, so a passing build does not mean the types are clean.
+
 ## Syncing Local Changes
 
 The React test app supports syncing your locally built changes for validation.

docs/react/testing.md

@@ -2,6 +2,10 @@
 
 Ionic Framework supports multiple versions of React. As a result, we need to verify that Ionic works correctly with each of these React versions.
 
+## Type Checking
+
+Run `npm run typecheck` in `packages/react` to check types. The rollup build only reports type errors as warnings, so a passing build does not mean the types are clean.
+
 ## Syncing Local Changes
 
 The React test app supports syncing your locally built changes for validation.

docs/vue-router/testing.md

@@ -2,6 +2,6 @@
 
 ## Tests
 
-* This package has no unit tests of its own. Its behavior is covered by the `@ionic/vue` test app, in `packages/vue/test/base/tests`. See [Vue Testing](../vue/testing.md).
+* This package has no unit tests of its own. Its behavior is covered by the `@ionic/vue` test app, in `packages/vue/test/base/tests`. Refer to [Vue Testing](../vue/testing.md).
 * Run `npm run typecheck` to check types. The rollup build only reports type errors as warnings.
 * Bug fix and feature PRs should have new tests verifying the PR functionality.

docs/vue/testing.md

@@ -2,6 +2,10 @@
 
 Ionic Framework supports multiple versions of Vue. As a result, we need to verify that Ionic works correctly with each of these Vue versions.
 
+## Type Checking
+
+Run `npm run typecheck` in `packages/vue` to check types. The rollup build only reports type errors as warnings, so a passing build does not mean the types are clean.
+
 ## Syncing Local Changes
 
 The Vue test app supports syncing your locally built changes for validation.

packages/react-router/package.json

@@ -28,6 +28,7 @@
     "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\"",
     "lint": "npm run eslint && npm run prettier -- --write --cache",
     "lint.fix": "npm run eslint -- --fix && npm run prettier -- --write --cache",
+    "typecheck": "tsc --noEmit",
     "sync": "sh ./scripts/sync.sh"
   },
   "main": "dist/index.js",