Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript Rollout Tier 8 - TimepickerMixin #372

Merged
merged 2 commits into from
Jan 12, 2025

Conversation

kikuomax
Copy link
Collaborator

Related issues:

Proposed Changes

  • Migration of TimepickerMixin

Rewrites `src/utils/TimepickerMixin.js` in TypeScript. Also includes a
fix of an obvious issue that the obsolete `value` prop was used.

Introduces a new interface `ITimepickerMixin` which extracts the props,
and computed values of `TimepickerMixin` as a super type. While
`TimepickerMixin` contains itself in its type definition, we can avoid
type recursive by using `ITimepickerMixin` instead; see `TimeFormatter`,
and `TimeParser`.

Introduces new function types:
- `TimeCreator`: type of the `timeCreator` prop
- `TimeFormatter`: type of the `timeFormatter` prop
- `TimeParser`: type of the `timeParser` prop

Introduces a new type `HourFormat` which is a union of the constants
`HOUR_FORMAT_24` and `HOUR_FORMAT_12` and represents the type of the
`hourFormat` prop.

The following methods of `src/utils/TimepickerMixin.ts` accept `number`
in addition to `string`:
- `onHoursChange`
- `onMinutesChange`
- `onSecondsChange`

The `minTime` and `maxTime` props of `TimepickerMixin` allow `null` so
that they meet the requirements of `Datetimepicker`.

Some tricky changes:
- Applies the `valueOf` method to the `Date` argument before passing it
  to `isNaN`, because `isNaN` does not accept a `Date` type in
  TypeScript. As far as I tested on Node v18, `Date.valueOf` returned
  `NaN` when `isNaN` was expected to return `true`.
- Performs an extra concatenation with an empty string (`+ ''`) is on
  some arguments given to `parseInt` to make sure they are strings.

Maybe too optimistic assumptions:
- While the `Intl.DateTimeFormat.resolvedOptions` returns
  `ResolvedDateTimeFormatOptions`, it is casted as
  `DateTimeFormatOptions` without checks
- Supposes the `input` ref to refer to an `Input` component instance
- Supposes the `dropdown` ref to refer to a `Dropdown` component
  instance
- Supposes the `target` field of the `event` parameter of the
  `onChangeNativePicker` method to be an `HTMLInputElement`

The `modelValue` prop allows `null`.

The following changes are trivial but I want to leave reasons for them:
- Replaces JSDoc comments with ordinary ones so that
  `@microsoft/api-extractor` won't pick them up for documentation
- Overuses non-null assertions (!) to keep the original behavior
Rewrites `src/utils/TimepickerMixin.spec.js` in TypeScript.

Passes "0" to the `onSecondsChange` method, because it now requires a
string.

Moves the definition of the test component before `wrapper` so that
`wrapper` can be properly typed with `VueWrapper`.

Trivial changes:
- Replaces the extension: ".js" → ".ts"
- Imports the spec building blocks from the `vitest` package
- Replaces `jest` with `vi`
@kikuomax kikuomax requested a review from wesdevpro January 11, 2025 16:07
@kikuomax kikuomax merged commit 0b188ca into ntohq:dev Jan 12, 2025
18 checks passed
@kikuomax kikuomax deleted the ts-rollout-tier-8-timepicker-mixin branch January 12, 2025 01:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TypeScript Rollout Tier 8
2 participants