JSX props are not validated

[prabirshrestha]

//cc @RyanCavanaugh

Here is the code to reproduce.

Notice how I make a spelling mistake for props when using Message component. <Message mesage="World!" />. I would had expected TypeScript to give me a compile error here.

node ..\bin\tsc.js --jsx react -t es5 -m amd app.tsx typings\react\react.d.ts

/// <references file="./typings/react/react.d.ts" />

import * as React from 'react';

export interface MessageProps {
    message: string;
}

export class Message extends React.Component<MessageProps, any> {

    render() {
        return <div>Hello {this.props.message}</div>;
    }

}

export class App extends React.Component<any, any> {

    render() {
        return <Message mesage="World!" />
    }

}

Here is the generated code.

/// <references file="./typings/react/react.d.ts" />
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", 'react'], function (require, exports, React) {
    var Message = (function (_super) {
        __extends(Message, _super);
        function Message() {
            _super.apply(this, arguments);
        }
        Message.prototype.render = function () {
            return React.createElement("div", null, "Hello ", this.props.message);
        };
        return Message;
    })(React.Component);
    exports.Message = Message;
    var App = (function (_super) {
        __extends(App, _super);
        function App() {
            _super.apply(this, arguments);
        }
        App.prototype.render = function () {
            return React.createElement(Message, {"messagex": "World!"});
        };
        return App;
    })(React.Component);
    exports.App = App;
});

Here is the definition of createElement from react.d.ts file.

    function createElement<P>(
        type: ComponentClass<P>,
        props?: P,
        ...children: ReactNode[]): ReactElement<P>;

React.createElement(Message, {"messagex": "World!"}); this could had been written in typescript as

React.createElement<MessageProps>(Message, <MessageProps>{"messagex": "World!"});

That would had lead to an error which could be caught during compile time.

[RyanCavanaugh]

Did you include react-jsx.d.ts ? That file contains type definitions for the JSX part of React.

[prabirshrestha]

no difference with or without react-jsx.d.ts.

/// <references file="./typings/react/react.d.ts" />
/// <references file="./typings/react/react-jsx.d.ts" />

import * as React from 'react';

Do I have to import the jsx module? if so how? I only added the references.

[tinganho]

Autocompletion is also missing using @basarat 's atom typescript.

[basarat]

Autocompletion is also missing using @basarat 's atom typescript.

If you open rView.tsx within atom-typescript's source code it works fine:

steps I did: https://github.com/TypeStrong/atom-typescript#configuration-tips

[tinganho]

@basarat I was referring to the React prop <Message mesage="World!" />. All other HTML attributes is working fine 😃 .

[basarat]

I was referring to the React prop

Sorry. I didn't read the complete issue details. My bad 🌹

[RyanCavanaugh]

Can you give it a shot with the new definition file from DefinitelyTyped/DefinitelyTyped#4846 ?

[prabirshrestha]

Doesn't work. But I found an interesting pattern here.

All the code snippets here use react.d.ts from DefinitelyTyped/DefinitelyTyped#4846

From http://www.jbrantly.com/typescript-and-jsx/

/// <references file="./react.d.ts" />

import * as React from 'react';

interface Props {  
  foo: string;
}

class MyComponent extends React.Component<Props, {}> {  
  render() {
    return <span>{this.props.foo}</span>
  }
}

<MyComponent foo="bar" />; // ok  
<MyComponent foo={0} />; // error  

This above code will throw the appropriate error as mentioned in the blog. But if I export the class it will silently compile without any errors.

/// <references file="./react.d.ts" />

import * as React from 'react';

interface Props {  
  foo: string;
}

export class MyComponent extends React.Component<Props, {}> {  
  render() {
    return <span>{this.props.foo}</span>
  }
}

<MyComponent foo="bar" />; // ok  
<MyComponent foo={0} />; // ok  

Then I tried the same with my code snippet. If I remove the export in both the classes Message and App it fails with the appropriate error.

/// <references file="./react.d.ts" />

import * as React from 'react';

export interface MessageProps {
    message: string;
}

class Message extends React.Component<MessageProps, any> {

    render() {
        return <div>Hello {this.props.message}</div>;
    }

}

class App extends React.Component<any, any> {

    render() {
        return <Message mesage="World!" />
    }

}

The error message:

ntsc --jsx react -t es5 -m amd app.tsx react.d.ts
app.tsx(20,16): error TS2324: Property 'message' is missing in type 'MessageProps'.
app.tsx(20,25): error TS2339: Property 'mesage' does not exist on type 'MessageProps'.

If I remove the export only in App it will compile without any errors.

/// <references file="./react.d.ts" />

import * as React from 'react';

export interface MessageProps {
    message: string;
}

export class Message extends React.Component<MessageProps, any> {

    render() {
        return <div>Hello {this.props.message}</div>;
    }

}

class App extends React.Component<any, any> {

    render() {
        return <Message mesage="World!" />
    }

}

But if I remove export in Message and add in App it shows the compile error.

/// <references file="./react.d.ts" />

import * as React from 'react';

export interface MessageProps {
    message: string;
}

class Message extends React.Component<MessageProps, any> {

    render() {
        return <div>Hello {this.props.message}</div>;
    }

}

export class App extends React.Component<any, any> {

    render() {
        return <Message mesage="World!" />
    }

}

Seems like export is the cause of this behavior.

[RyanCavanaugh]

Got it, thanks for narrowing it down! Working on a fix now.