Skip to content

chore(vue): enable strict type checking in vue and vue-router - #31320

Merged
ShaneK merged 2 commits into
major-9.0from
FW-7656
Aug 6, 2026
Merged

chore(vue): enable strict type checking in vue and vue-router#31320
ShaneK merged 2 commits into
major-9.0from
FW-7656

Conversation

@ShaneK

@ShaneK ShaneK commented Aug 3, 2026

Copy link
Copy Markdown
Member

Issue number: internal


What is the current behavior?

Currently, packages/vue and packages/vue-router inherit strict from core/tsconfig.base.json as of #31280, but the 61 errors that turns on were never fixed: 41 in @ionic/vue (24 of them in IonTabBar) and 20 in @ionic/vue-router. Neither package sets rootDir.

Nothing reports them today. The rollup build prints type errors as (!) [plugin typescript] warnings and still exits 0, and there's no tsc --noEmit step in either CI action, so a type error cannot fail a build.

Two of the errors are actual bugs, which I went ahead and fixed here.

What is the new behavior?

Both packages now typecheck clean, and rootDir: "src" is set to match the other packages. Most of the 61 fixes are null guards and signatures that were lying about what they returned. getTabsHistory was declared (tab: string) => RouteInfo[] but everything using this was already treating it as string | undefined anyway. tabs: {} in IonTabBar's data inferred {} rather than the TabState interface already declared in the same file. _tabsWillChange and _tabsDidChange were initialized to a Vue prop-descriptor object instead of a function, which is why calling them wasn't type-safe.

Changing rootDir didn't do actually anything here, it just makes us consistent. @rollup/plugin-typescript already infers src as the common root, and I verified dist/ for both packages with and without it to confirm nothing changed.

Both bugs above are fixed.

One behavior change worth calling out: Pressing back with no defaultHref and nothing in history used to call router.replace(undefined), which vue-router resolves against the current location and then rejects as NAVIGATION_DUPLICATED, so it already did nothing. That path now returns without navigating, matching @ionic/react-router, and it also clears the pop/back incomingRouteParams that the old code left staged for the next navigation to pick up. ion-back-button also reads the backButtonDefaultHref config now. Core resolves that config itself and only renders the button once it has a href, so a config-only back button was previously visible but did nothing.

CI now runs a typecheck script in both build-vue and build-vue-router, between lint and build, preventing us from having to do this cleanup again in the future.

Does this introduce a breaking change?

  • Yes
  • No

Other information

@ShaneK
ShaneK requested a review from a team as a code owner August 3, 2026 20:52
@ShaneK
ShaneK requested a review from BenOsodrac August 3, 2026 20:52
@vercel

vercel Bot commented Aug 3, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview Aug 4, 2026 7:07pm

Request Review

@github-actions github-actions Bot added the package: vue @ionic/vue package label Aug 3, 2026
@ShaneK
ShaneK requested review from thetaPC and removed request for BenOsodrac August 3, 2026 21:21
…o FW-7656

# Conflicts:
#	packages/vue-router/tsconfig.json
#	packages/vue/src/components/IonTabBar.ts
#	packages/vue/tsconfig.json

@thetaPC thetaPC left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

working-directory: ./packages/vue-router
# The rollup build reports type errors as warnings and still succeeds, so
# this step is what keeps the package type-clean.
- name: 🔎 Typecheck

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it worth adding to the other frameworks? If not, then adding a comment here would be great to remind us of why only these packages.


* Tests are found in the `__tests__` directory and use Jest.
* Tests can be run using `npm run test.spec`
* 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).

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* 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).

@ShaneK
ShaneK merged commit 279fb16 into major-9.0 Aug 6, 2026
55 checks passed
@ShaneK
ShaneK deleted the FW-7656 branch August 6, 2026 13:33
ShaneK added a commit that referenced this pull request Aug 6, 2026
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?

Currently, `@ionic/react` and `@ionic/react-router` build with rollup
and `@rollup/plugin-typescript`, which reports type errors as `(!)
[plugin typescript]` warnings and still exits 0. Neither `build-react`
nor `build-react-router` runs `tsc --noEmit`, so a type error can't fail
CI. This is the same gap #31320 closed for `@ionic/vue` and
`@ionic/vue-router`, and it came out of review feedback on that PR
asking whether the typecheck step was worth adding to the other
frameworks.

## What is the new behavior?

Both React packages now have a `typecheck` script and a CI step that
runs it between lint and build, matching the Vue packages. Neither
package needed source changes: both already pass `tsc --noEmit` clean
under the `strict` they inherit from `core/tsconfig.base.json`, so this
is a guard against future regressions rather than a cleanup.

Angular is deliberately left alone. `ng-packagr` fails the build on type
errors, so a separate step there would be redundant. I added a comment
to `build-angular` and `build-angular-server` saying so, so the next
person doesn't have to work it out again.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

## Other information

Follow-up to
[#31320](#31320),
addressing @thetaPC's review comments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: vue @ionic/vue package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants