{"action":"created","issue":{"url":"https://api.github.com/repos/Microsoft/TypeScript/issues/3737","labels_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/3737/labels{/name}","comments_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/3737/comments","events_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/3737/events","html_url":"https://github.com/Microsoft/TypeScript/issues/3737","id":92935335,"number":3737,"title":"JSX props are not validated","user":{"login":"prabirshrestha","id":287744,"avatar_url":"https://avatars.githubusercontent.com/u/287744?v=3","gravatar_id":"","url":"https://api.github.com/users/prabirshrestha","html_url":"https://github.com/prabirshrestha","followers_url":"https://api.github.com/users/prabirshrestha/followers","following_url":"https://api.github.com/users/prabirshrestha/following{/other_user}","gists_url":"https://api.github.com/users/prabirshrestha/gists{/gist_id}","starred_url":"https://api.github.com/users/prabirshrestha/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/prabirshrestha/subscriptions","organizations_url":"https://api.github.com/users/prabirshrestha/orgs","repos_url":"https://api.github.com/users/prabirshrestha/repos","events_url":"https://api.github.com/users/prabirshrestha/events{/privacy}","received_events_url":"https://api.github.com/users/prabirshrestha/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Microsoft/TypeScript/labels/Bug","name":"Bug","color":"e11d21"}],"state":"open","locked":false,"assignee":{"login":"RyanCavanaugh","id":6685088,"avatar_url":"https://avatars.githubusercontent.com/u/6685088?v=3","gravatar_id":"","url":"https://api.github.com/users/RyanCavanaugh","html_url":"https://github.com/RyanCavanaugh","followers_url":"https://api.github.com/users/RyanCavanaugh/followers","following_url":"https://api.github.com/users/RyanCavanaugh/following{/other_user}","gists_url":"https://api.github.com/users/RyanCavanaugh/gists{/gist_id}","starred_url":"https://api.github.com/users/RyanCavanaugh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RyanCavanaugh/subscriptions","organizations_url":"https://api.github.com/users/RyanCavanaugh/orgs","repos_url":"https://api.github.com/users/RyanCavanaugh/repos","events_url":"https://api.github.com/users/RyanCavanaugh/events{/privacy}","received_events_url":"https://api.github.com/users/RyanCavanaugh/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/Microsoft/TypeScript/milestones/8","html_url":"https://github.com/Microsoft/TypeScript/milestones/TypeScript%201.6","labels_url":"https://api.github.com/repos/Microsoft/TypeScript/milestones/8/labels","id":900034,"number":8,"title":"TypeScript 1.6","description":"","creator":{"login":"mhegazy","id":8000722,"avatar_url":"https://avatars.githubusercontent.com/u/8000722?v=3","gravatar_id":"","url":"https://api.github.com/users/mhegazy","html_url":"https://github.com/mhegazy","followers_url":"https://api.github.com/users/mhegazy/followers","following_url":"https://api.github.com/users/mhegazy/following{/other_user}","gists_url":"https://api.github.com/users/mhegazy/gists{/gist_id}","starred_url":"https://api.github.com/users/mhegazy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mhegazy/subscriptions","organizations_url":"https://api.github.com/users/mhegazy/orgs","repos_url":"https://api.github.com/users/mhegazy/repos","events_url":"https://api.github.com/users/mhegazy/events{/privacy}","received_events_url":"https://api.github.com/users/mhegazy/received_events","type":"User","site_admin":false},"open_issues":87,"closed_issues":95,"state":"open","created_at":"2014-12-11T05:46:12Z","updated_at":"2015-07-07T00:43:37Z","due_on":null,"closed_at":null},"comments":8,"created_at":"2015-07-03T20:55:38Z","updated_at":"2015-07-07T18:33:40Z","closed_at":null,"body":"//cc @RyanCavanaugh\r\n\r\nHere is the code to reproduce.\r\n\r\nNotice 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.\r\n\r\n```bash\r\nnode ..\\bin\\tsc.js --jsx react -t es5 -m amd app.tsx typings\\react\\react.d.ts\r\n```\r\n\r\n```typescript\r\n/// <references file=\"./typings/react/react.d.ts\" />\r\n\r\nimport * as React from 'react';\r\n\r\nexport interface MessageProps {\r\n\tmessage: string;\r\n}\r\n\r\nexport class Message extends React.Component<MessageProps, any> {\r\n\r\n\trender() {\r\n\t\treturn <div>Hello {this.props.message}</div>;\r\n\t}\r\n\r\n}\r\n\r\nexport class App extends React.Component<any, any> {\r\n\r\n\trender() {\r\n\t\treturn <Message mesage=\"World!\" />\r\n\t}\r\n\r\n}\r\n```\r\n\r\nHere is the generated code.\r\n\r\n```typescript\r\n/// <references file=\"./typings/react/react.d.ts\" />\r\nvar __extends = (this && this.__extends) || function (d, b) {\r\n    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];\r\n    function __() { this.constructor = d; }\r\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n};\r\ndefine([\"require\", \"exports\", 'react'], function (require, exports, React) {\r\n    var Message = (function (_super) {\r\n        __extends(Message, _super);\r\n        function Message() {\r\n            _super.apply(this, arguments);\r\n        }\r\n        Message.prototype.render = function () {\r\n            return React.createElement(\"div\", null, \"Hello \", this.props.message);\r\n        };\r\n        return Message;\r\n    })(React.Component);\r\n    exports.Message = Message;\r\n    var App = (function (_super) {\r\n        __extends(App, _super);\r\n        function App() {\r\n            _super.apply(this, arguments);\r\n        }\r\n        App.prototype.render = function () {\r\n            return React.createElement(Message, {\"messagex\": \"World!\"});\r\n        };\r\n        return App;\r\n    })(React.Component);\r\n    exports.App = App;\r\n});\r\n```\r\n\r\nHere is the definition of `createElement` from `react.d.ts` file.\r\n\r\n```typescript\r\n    function createElement<P>(\r\n        type: ComponentClass<P>,\r\n        props?: P,\r\n        ...children: ReactNode[]): ReactElement<P>;\r\n```\r\n\r\n`React.createElement(Message, {\"messagex\": \"World!\"});` this could had been written in typescript as \r\n\r\n```typescript\r\nReact.createElement<MessageProps>(Message, <MessageProps>{\"messagex\": \"World!\"});\r\n```\r\n\r\nThat would had lead to an error which could be caught during compile time."},"comment":{"url":"https://api.github.com/repos/Microsoft/TypeScript/issues/comments/119295041","html_url":"https://github.com/Microsoft/TypeScript/issues/3737#issuecomment-119295041","issue_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/3737","id":119295041,"user":{"login":"prabirshrestha","id":287744,"avatar_url":"https://avatars.githubusercontent.com/u/287744?v=3","gravatar_id":"","url":"https://api.github.com/users/prabirshrestha","html_url":"https://github.com/prabirshrestha","followers_url":"https://api.github.com/users/prabirshrestha/followers","following_url":"https://api.github.com/users/prabirshrestha/following{/other_user}","gists_url":"https://api.github.com/users/prabirshrestha/gists{/gist_id}","starred_url":"https://api.github.com/users/prabirshrestha/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/prabirshrestha/subscriptions","organizations_url":"https://api.github.com/users/prabirshrestha/orgs","repos_url":"https://api.github.com/users/prabirshrestha/repos","events_url":"https://api.github.com/users/prabirshrestha/events{/privacy}","received_events_url":"https://api.github.com/users/prabirshrestha/received_events","type":"User","site_admin":false},"created_at":"2015-07-07T18:33:40Z","updated_at":"2015-07-07T18:33:40Z","body":"Doesn't work. But I found an interesting pattern here.\r\n\r\n*All the code snippets here use `react.d.ts` from https://github.com/borisyankov/DefinitelyTyped/pull/4846*\r\n\r\nFrom http://www.jbrantly.com/typescript-and-jsx/\r\n\r\n```typescript\r\n/// <references file=\"./react.d.ts\" />\r\n\r\nimport * as React from 'react';\r\n\r\ninterface Props {  \r\n  foo: string;\r\n}\r\n\r\nclass MyComponent extends React.Component<Props, {}> {  \r\n  render() {\r\n    return <span>{this.props.foo}</span>\r\n  }\r\n}\r\n\r\n<MyComponent foo=\"bar\" />; // ok  \r\n<MyComponent foo={0} />; // error  \r\n```\r\n\r\nThis 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.\r\n\r\n```typescript\r\n/// <references file=\"./react.d.ts\" />\r\n\r\nimport * as React from 'react';\r\n\r\ninterface Props {  \r\n  foo: string;\r\n}\r\n\r\nexport class MyComponent extends React.Component<Props, {}> {  \r\n  render() {\r\n    return <span>{this.props.foo}</span>\r\n  }\r\n}\r\n\r\n<MyComponent foo=\"bar\" />; // ok  \r\n<MyComponent foo={0} />; // ok  \r\n```\r\n\r\nThen 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.\r\n\r\n```typescript\r\n/// <references file=\"./react.d.ts\" />\r\n\r\nimport * as React from 'react';\r\n\r\nexport interface MessageProps {\r\n    message: string;\r\n}\r\n\r\nclass Message extends React.Component<MessageProps, any> {\r\n\r\n    render() {\r\n        return <div>Hello {this.props.message}</div>;\r\n    }\r\n\r\n}\r\n\r\nclass App extends React.Component<any, any> {\r\n\r\n    render() {\r\n        return <Message mesage=\"World!\" />\r\n    }\r\n\r\n}\r\n```\r\n\r\nThe error message:\r\n\r\n```\r\nntsc --jsx react -t es5 -m amd app.tsx react.d.ts\r\napp.tsx(20,16): error TS2324: Property 'message' is missing in type 'MessageProps'.\r\napp.tsx(20,25): error TS2339: Property 'mesage' does not exist on type 'MessageProps'.\r\n```\r\n\r\nIf I remove the export only in App it will compile without any errors.\r\n\r\n```typescript\r\n/// <references file=\"./react.d.ts\" />\r\n\r\nimport * as React from 'react';\r\n\r\nexport interface MessageProps {\r\n    message: string;\r\n}\r\n\r\nexport class Message extends React.Component<MessageProps, any> {\r\n\r\n    render() {\r\n        return <div>Hello {this.props.message}</div>;\r\n    }\r\n\r\n}\r\n\r\nclass App extends React.Component<any, any> {\r\n\r\n    render() {\r\n        return <Message mesage=\"World!\" />\r\n    }\r\n\r\n}\r\n```\r\n\r\nBut if I remove export in `Message` and add in `App` it shows the compile error.\r\n\r\n```typescript\r\n/// <references file=\"./react.d.ts\" />\r\n\r\nimport * as React from 'react';\r\n\r\nexport interface MessageProps {\r\n    message: string;\r\n}\r\n\r\nclass Message extends React.Component<MessageProps, any> {\r\n\r\n    render() {\r\n        return <div>Hello {this.props.message}</div>;\r\n    }\r\n\r\n}\r\n\r\nexport class App extends React.Component<any, any> {\r\n\r\n    render() {\r\n        return <Message mesage=\"World!\" />\r\n    }\r\n\r\n}\r\n```\r\n\r\nSeems like `export` is the cause of this behavior. "}}