Typescript -ongelmat ja keskustelut

[Stephen Elop]

Itse käytän React opiskelussani typescriptiä, mutta ajattelin että sen sijaan että kyselisin typescript keskeisiä juttuja react -keskustelussa, olisi typescriptille pyhitetty keskustelu parempi paikka.

Ongelma. React-router esimerkin toimimaan saaminen typescriptillä ilman olennaisia muutoksia. Alkuperäinen React Router: Declarative Routing for React

function PrivateRoute({ component: Component, ...rest })

Oma versioni

function PrivateRoute( {component, ...rest}: {component:Component}) : JSX.Element {
  return (
    <h3>{ component  }</h3>);
}

function Public(): JSX.Element {
  return <h3>Public</h3>;
}

function Protected() {
  return <h3>Protected</h3>;
}

Virhe tulee seuraavasta rivistä

<PrivateRoute path="/protected" component={Protected} />

ja valitusvirsi on

Type '() => Element' is missing the following properties from type 'Component<{}, {}, any>': context, setState, forceUpdate, render, and 3 more.ts(2740)
App.tsx(50, 47): The expected type comes from property 'component' which is declared here on type 'IntrinsicAttributes & { component: Component<{}, {}, any>; }'

App.tsx(50, 47) viittaa tuohon PrivateRoute jälkimmäiseen komponentti -Tyyppiin

Jos taas katsoo miten tuo React-routerin Route on määritelty, joka ottaa vastaan komponentin, niin se on

export interface RouteProps {
  location?: H.Location;
  component?: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
  render?: ((props: RouteComponentProps<any>) => React.ReactNode);
  children?: ((props: RouteChildrenProps<any>) => React.ReactNode) | React.ReactNode;
  path?: string | string[];
  exact?: boolean;
  sensitive?: boolean;
  strict?: boolean;
}
export class Route<T extends RouteProps = RouteProps> extends React.Component<T, any> { }

Editti. Seuraava ei kuulukkaan tähän. Vain Route määritys

Spoileri: turhake

Mutta sovellukseen se on importoitu

import {
  BrowserRouter as Router,

Ja tuo BrowserRouter on määritelty

export interface BrowserRouterProps {
    basename?: string;
    getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void);
    forceRefresh?: boolean;
    keyLength?: number;
}
export class BrowserRouter extends React.Component<BrowserRouterProps, any> {}

Joten miten tuota PrivateRoute funktiota pitäisi oikein ruveta määrittelemään/esittelemään tässä tapauksessa?

Huom. Editoitu.

 

[Zigh]

No joko pistät Public ja Protected palauttamaan React.Component tai PrivateRoute ottamaan vastaan JSX.Element ?

 

[Stephen Elop]

No joko pistät Public ja Protected palauttamaan React.Component tai PrivateRoute ottamaan vastaan JSX.Element ?

Samainen valitusvirsi myös seuraavalla pätkällä, joka on siis lähempänä alkuperäistä React router esimerkkiä

function PrivateRoute( {component, ...rest}: {component:Component}) {
  return (
    <h3>{ component  }</h3>);
}

function Public() {
  return <h3>Public</h3>;
}

function Protected() {
  return <h3>Protected</h3>;
}

 

[Stephen Elop]

Tuolla on yksi toteutus Protected routes and authentication with React Router v4 . En testannut tuota, koska se ei nyt ole varsinainen kysymykseni vaan aikomukseni on pilkkoa tuo juttu pieniin tyypitettyihin osiin. Ihan vain oman ymmärrykseni takia.

 

[Stephen Elop]

Seuraavalla kääntyy, mutta ei linkki ei (privateroute) ei vielä toimi

function PrivateRoute<T extends RouteProps = RouteProps>({component, ...rest}: T ) {
  return (
    <Route
      {...rest}
      render={props =>
         (
          <Component {...props} />
        )
      }
    />
  )
}

 

[Stephen Elop]

PrivateRoute :n saa toimimaan noilla ohjeilla Implement react-router PrivateRoute in Typescript project

Eli itse tein seuraavasti

interface PrivateRouteProps extends RouteProps {
    component: any;
}

const PrivateRoute = (props: PrivateRouteProps) => {
    const { component: Component, ...rest } = props;

  return (

En kyllä ymmärrä miksi Tarvitaan tuo PrivateRouteProps eikä vain suoraan voi käyttää RouteProps -interfacea?


Nyt sitten on vielä ongelmana PrivateRouten palauttaman staten lukeminen Login -luokassa, eli miten tuo from saadaan luettue vastaanottavassa luokassa?

          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }

 

[Paapaa]

En kyllä ymmärrä miksi Tarvitaan tuo PrivateRouteProps eikä vain suoraan voi käyttää RouteProps -interfacea?

Eli mitä siis herjaa jos käytät RoutePropsia?

Toinen kysymys. Täällä sanotaan:

ReactTraining/react-router

The state object can be accessed via this.props.location.state in the redirected-to component.

 

[Stephen Elop]

Eli mitä siis herjaa jos käytät RoutePropsia?

Pelkällä RoutePropsilla tulee seuraava herja

JSX element type 'Component' does not have any construct or call signatures.ts(2604)

Ja tulee siis tuosta seuraavasta pätkästä

<Component { ...props } />

 

[Paapaa]

Vähän nihkeästi näkee noista, mitä olet tekemässä. Laita vaikka Code Sandboxiin ja linkki tänne niin voi helpommin testailla. Miten erityisesti Component on määritelty tai importattu?

 

[Stephen Elop]

Vähän nihkeästi näkee noista, mitä olet tekemässä. Laita vaikka Code Sandboxiin ja linkki tänne niin voi helpommin testailla. Miten erityisesti Component on määritelty tai importattu?

Noi systeemit on mulle vähän outoja. Näyttääkö tuo mitään Sandbox - CodeSandbox ?

Kyseessä on siis React-Router redirects(auth) example mutta koitan pistää toimimaan typescriptillä React Router - Redirects (Auth) - CodeSandbox

 

[Stephen Elop]

Evotanpa tuossa linkin pistämisessä. Jos seuraava ei toimi, niin sit varmaan rupeen lukee vähän ohjeita miten nuo sandboxit oikein pelaa React Router - Redirects (Auth) - CodeSandbox

No nyt avasin uuden sandboxin ja mielestäni tallensinkin ja share painikkeella aukeavasta ikkunasta copy link joka on tuo winter-voice-5yyrk - CodeSandbox

Viimeinen Lisäys. Viimeisin linkki toimi kun testasin.

 

[Stephen Elop]

Tuolla on selitettä ja linkin jampan toimivalle typescript versiolle tähän omaan aloitusongelmaani. React Router Redirect with Typescript
Tuossa esimerkissä lisätään interface ainoastaan login luokkaa varten jolloin tulee accessi props.location.stateen. Tuolla sivulla on myös codesandbox -linkki.