route.query型別報錯，不能將LocationQueryValue...... 分配給型別.....

發表於2024-02-05
型別

在VueRouter中使用route.query時，得到的型別是LocationQuery

export declare type LocationQuery = Record<string, LocationQueryValue | LocationQueryValue[]>;

而query中的引數型別為(string|null) | (string|null)[]

而正常情況下我們預設query中的引數都是string型別。

其實如果你的連結上有多個同名query，route.query會返回一個陣列

// www.anyurl.com?name=123&name=456

console.log(route.query) // ['123', '456']

但是絕大多數情況下我們不會這樣玩。

使用的時候我們認為query的值都是string，所以全部as一下是可以的。
const aa = route.query.status as string

更方便的辦法是在.d.ts檔案中擴充套件route.query的型別

如下：

import 'vue-router'

declear module 'vue-router' {
    interface RouteLocationNormalizedLoaded {
        query: Record<string, string>
    }
}

RouteLocationNormalizedLoaded 是route的型別，擴充套件route.query的型別為Record<string, string>可以應對大多數場景。

如果你確定你的應用只使用有限的幾個已知型別的query，也可以宣告成類似如下的形式

{
    query: {
        token?: string,
        status?: '01' | '02'
    }
}

相關文章