javascript - Typescript-feil under konvertering av et React-prosjekt

Dette er spesifikt for en React-app jeg konverterer fra standard ES2015 til Typescript. I mine .tsx-filer (konvertert fra vanlige .js-filer) får jeg et par Typescript-feil som jeg ikke vet hvordan jeg skal løse.

Den første er: error TS2339: Egenskapen 'propTypes' finnes ikke på typen 'typeof App'.

Dette gjelder for:

App.propTypes = {
  actions: PropTypes.object.isRequired,
  fuelSavingsAppState: PropTypes.object.isRequired
};

Jeg prøvde å lage et grensesnitt over den koden som definerte App som:

interface App {
    propTypes?: any;
}

Men dette hadde ingen effekt. Klarer jeg er ny på Typescript, så hva går jeg glipp av?

Den andre feilen er:

error TS2605: JSX element type 'Element' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Element'

og dette gjelder for:

{settings.necessaryDataIsProvidedToCalculateSavings ? <FuelSavingsResults savings={settings.savings} /> : null}

Feilen refererer spesifikt til delen om <FuelSavingsResults

Helt i villrede om hvor jeg i det hele tatt skal begynne med det. Alle forslag tas imot med takk.

i tilfelle det hjelper, starter definisjonen for FuelSavingsResults slik:

let FuelSavingsResults = (props) => {
    let savingsExist = NumberFormatter.scrubFormatting(props.savings.monthly) > 0;
    let savingsClass = savingsExist ? 'savings' : 'loss';
    let resultLabel = savingsExist ? 'Savings' : 'Loss';

og deretter har en vanlig React-renderingsmetode som følger, men jeg tror ikke det vil ha noen betydning.

Svar #1

feil TS2339: Egenskapen 'propTypes' eksisterer ikke på typen 'typeof App'.

I stedet for

class App extends React.Component{
}
App.propTypes = {
  actions: PropTypes.object.isRequired,
  fuelSavingsAppState: PropTypes.object.isRequired
};

Bruk en static-egenskap.

class App extends React.Component{
    static propTypes = {
      actions: PropTypes.object.isRequired,
      fuelSavingsAppState: PropTypes.object.isRequired
    };
}

feil TS2605: JSX-elementtype 'Element' er ikke en konstruksjonsfunksjon for JSX-elementer. Egenskapen 'render' mangler i typen 'Element'

Dette var en feil i kompilatoren som siden har blitt fikset: https://github.com/Microsoft/TypeScript/issues/6349 Alternativt kan du gi typeannotasjoner for props. 🌹

Svar #2

Er propTypes virkelig nødvendig? Vil ikke grensesnittkontrollen ved kompilering sjekke det propTypes sjekker ved kjøretid?

interface IApp{
  actions:any;
  fuelSavingsAppState: (props:any)=> void;
}

class App extends React.Component<IApp,{}>{
}

eller hvis du bruker dumme komponenter

const App = ({actions,  fuelSavingsAppState }:IApp):React.ReactElement<{}> => (
  <div>
   What Ever you want to do with the props 
  </div>
)

Merk: Hvis du bruker objekt, vennligst opprett et grensesnitt for det samme. Som handlinger som for øyeblikket er gitt som 'any', som ideelt sett burde vært et grensesnitt.

Relaterte artikler