reactjs - Gränssnittsegenskaper i funktionella komponenter

Jag använder den nattliga versionen av TypeScript (Version 1.9.0-dev.20160218) och försöker ta reda på om det finns något sätt att använda statiskt typade props i min funktionella React-komponent.

Den nuvarande koden verkar inte ge några kompileringfel och fungerar precis som den ska. Men eftersom jag har satt myvar till att vara av typen Number, men faktiskt tilldelar den som en String, skulle jag ha förväntat mig ett kompileringfel.

Stöder TypeScript för närvarande strikt-typer för props i funktionella komponenter, eller endast för klasser?

interface Props extends React.Props {
    mynumber: Number
}

var MyComponent = (props: Props) => {
    return <p>My variable: {props.mynumber}</p>;
};

var MyContainer = () => {
    const mystring:String = '123';
    return <MyComponent myvar={mystring}/>
};

Svar #1

Denna kod fungerar som förväntat:

/// <reference path="../DefinitelyTyped/react/react.d.ts" />

import * as React from 'react';

interface Props extends React.Props<any> {
    mynumber: Number
}

var MyComponent = (props: Props) => {
    return <p>My variable: {props.mynumber}</p>;
};

var MyContainer = () => {
    const mystring:String = '123';
    return <MyComponent myvar={mystring}/>
};

test.tsx(15,12): fel TS2324: Egenskapen 'mynumber' saknas i typen 'IntrinsicAttributes & Props'. test.tsx(15,25): fel TS2339: Egenskapen 'myvar' finns inte i typen 'IntrinsicAttributes & Props'.

Det ser ut som att du har en föråldrad react.d.ts, eller att något annat är fel och ditt kodexempel är inte representativt.

För övrigt, använd aldrig String eller Number. Det här är inte de typer du vill ha - använd string och number respektive

Relaterade artiklar