reactjs - Null-sikker måte å bruke Router i next.js med TypeScript

next.js anbefaler følgende mønster for å få tilgang til ruteparametrene:

const Page = withRouter((props) => (
  <p>{props.router.query.title}</p>
))

Nå er problemet at i TypeScript vil koden ovenfor vise en feil fordi router og query kan være udefinert. Den må skrives om enten som

props.router!.query!.title

eller som

props.router && props.router.query && props.router.query.title

begge måtene er dårlige etter min mening. I den første tvinger vi bare kompilatoren til å ignorere feilen, og i den andre gjør vi koden oppblåst med unødvendig støy.

Finnes det en bedre måte å få tilgang til ruteparametrene på?

Svar #1

Det finnes et forslag om valgfri kjeding i JavaScript, men det ser ut til at det vil ta en stund før det blir endelig.

Du har rett i å unngå props.router!.query!.title for å ignorere typekontrollfeilene. Du må kondisjonelt sjekke for de eksisterende egenskapene som du foreslo: props.router && props.router.query && props.router.query.title

Jeg lager vanligvis en hjelpefunksjon for å akseptere et objekt og hente en nestet egenskap fra det. Eller bedre, du kan bruke et eksisterende bibliotek som lodash get:

import get from 'lodash/get'

...
const title = get(props, ['router', 'query', 'title'])
...

Svar #2

Det finnes en operator kalt valgfri kjeding ?. som lar deg lese verdien fra en objektkjede uten å måtte sjekke at hver referanse er gyldig. I stedet for å forårsake en feil vil den returnere undefined.

Så du kan gjøre:

const Page = withRouter((props) => (
    <p>{props.router?.query?.title}</p>
))

Relaterte artikler