Interface props in functional components

Question

I am using the nightly-build of TypeScript (Version 1.9.0-dev.20160218), and trying to work out if there is any way to use static typed props in my functional react component.

The current code seems to give no compile errors, and works just fine. But as I have set the myvar to be of type Number, but actually assign it as a String I would have expected a compile-time error.

Does TypeScript currently support strict-types for props in functional components, or only for classes?

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}/>
};

Answer 1

This code works as expected:

/// <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): error TS2324: Property 'mynumber' is missing in type 'IntrinsicAttributes & Props'. test.tsx(15,25): error TS2339: Property 'myvar' does not exist on type 'IntrinsicAttributes & Props'.

It looks like you have an outdated react.d.ts, or something else is wrong and your code sample isn't representative.

As an aside, never use String or Number. These aren't the types you want -- use string and number, respectively