title: How add javascript files to Visual Studio Community 2019 typescript project
body: <p>I found some tutorial that explains how to build the simplest project:
  <a href="https://docs.microsoft.com/en-us/visualstudio/javascript/tutorial-nodejs-with-react-and-jsx?view=vs-2019" rel="nofollow noreferrer">Tutorial: Create a Node.js and React app in Visual Studio</a></p>
  <p>I succeeded to build a project that shows a message &quot;Welcome to React!!&quot;.
  This project contains only one file in TypeScript: app.tsx. Now I want to build a project containing some additional modules written in React and having extension &quot;.js&quot;. It seems that these files should be transpiled to TypeScript. But I did not find how to do that in this project. For example in app.tsx there is a code</p>
  <pre><code>import Button from &quot;./Button&quot;;
  ...
  ReactDOM.render(&lt;Button /&gt;, document.getElementById('root'));
  </code></pre>
  <p>and I have file Button.js that contains</p>
  <pre><code>...
  handleClick = () =&gt; {
  this.props.clickHandler(this.props.name);
  };
  </code></pre>
  <p>When I run in command line</p>
  <pre><code>node_modules\.bin\webpack app.tsx --config webpack-config.js
  </code></pre>
  <p>I get an error message:</p>
  <pre><code>ERROR in ./Button.js 11:14
  Module parse failed: Unexpected token (11:14)
  You may need an appropriate loader to handle this file type, 
  currently no loaders are configured to process this file. See 
  https://webpack.js.org/concepts#loaders
  |   //};
  |
  &gt;   handleClick = () =&gt; {
  |     this.props.clickHandler(this.props.name);
  |   };
  </code></pre>
  <p>In npm folder I have ts-loader, so I do not understand what the problem?
  Update 1. I did changes as Rich N suggested and now it works. But I still want to use the original content of Button.js:</p>
  <pre><code>import React from &quot;react&quot;;
  import PropTypes from &quot;prop-types&quot;;
  //import &quot;./Button.css&quot;;
  
  export default class Button extends React.Component {
  static propTypes = {
  name: PropTypes.string,    
  clickHandler: PropTypes.func,
  };
  
  handleClick = () =&gt; {
  this.props.clickHandler(this.props.name);
  };
  
  setImage= () =&gt; {
    var img=&quot;./Images/&quot;;
   switch(this.props.name)
   {
     case &quot;move&quot;:
         img+=&quot;Move.jpg&quot;;
         break;
      case &quot;drawPoint&quot;:
         img+=&quot;Point.jpg&quot;;
         break;
         default:
             console.log(&quot;default image&quot;)
   }
   return img;
   };
  
   render() {
  
  
   return (
    &lt;div &gt;
      &lt;button onClick={this.handleClick}&gt;
          &lt;img src={this.setImage()} alt=&quot;&quot;&gt;&lt;/img&gt;
     &lt;/button&gt;
    &lt;/div&gt;
    );
    }
   }
  </code></pre>
  <p>When I try to run the project I receive a number of error messages. For example:</p>
  <pre><code>Error   TS2339  (TS) Property 'props' does not exist on type 'Button'.
  </code></pre>
  <p>I think this is because not each JavaScript code is valid TypeScript code. So I still have 2 questions:</p>
  <ol>
  <li>How change this code so that it will be right TypeScript code?</li>
  <li>Is there any utility that allows to do that automatically, not manually?</li>
  </ol>