https://github.com/jonathanjameswatson/vue-router-4-query-types

A reproduction of well-typed code that fails due to an incorrect type in Vue Router 4
https://github.com/jonathanjameswatson/vue-router-4-query-types

Last synced: 7 days ago
JSON representation

A reproduction of well-typed code that fails due to an incorrect type in Vue Router 4

• Host: GitHub
• URL: https://github.com/jonathanjameswatson/vue-router-4-query-types
• Owner: jonathanjameswatson
• Created: 2023-06-18T01:10:46.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-06-18T01:10:50.000Z (over 1 year ago)
• Last Synced: 2024-11-14T00:25:29.731Z (about 2 months ago)
• Language: TypeScript
• Homepage:
• Size: 36.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-router-4-query-types

A reproduction of well-typed code that fails due to an incorrect type in Vue Router 4.

## Steps to reproduce

1. `npm install`

2. `npm run typecheck`

3. `npm run dev`

4. Go to `/` and check for errors.

5. Go to `/?foo=bar` and check for errors.

## What is expected

Step 3 should show that the code does not type-check, as it includes dangerous code that should produce an error in step 4.

## What is actually happening

Step 3 shows that the code type-checks. The bug, reproduced in step 4, comes from `route.query.foo` being `undefined`, despite `route.query.foo` not being inhabited by `undefined`.

## Fix

The type of `LocationQuery` should be changed from:

```ts

export type LocationQueryValue = string | null

export type LocationQuery = Record<

  string,

  LocationQueryValue | LocationQueryValue[]

>

```

to

```ts

export type LocationQueryValue = string | null

export type LocationQuery = Record<

  string,

  LocationQueryValue | LocationQueryValue[] | undefined

>

```

`LocationQueryRaw` is defined as follows, meaning that it probably does not need to change:

```ts

export type LocationQueryValueRaw = LocationQueryValue | number | undefined

export type LocationQueryRaw = Record<

  string | number,

  LocationQueryValueRaw | LocationQueryValueRaw[]

>

```