如何將 javascript 文件添加到 Visual Studio Community 2019 typescript 項目

Question

我找到了一些解釋如何構建最簡單項目的教程： 教程：在 Visual Studio 中創建 Node.js 和 React 應用程序

我成功構建了一個顯示消息“Welcome to React.:”的項目。 該項目僅包含 TypeScript 中的一個文件。 應用程序.tsx。 現在我想構建一個項目，其中包含一些用 React 編寫的附加模塊並具有擴展名“.js”。 看來這些文件應該被轉譯成TypeScript。 但我沒有找到如何在這個項目中做到這一點。 例如在 app.tsx 中有一段代碼

import Button from "./Button";
...
ReactDOM.render(<Button />, document.getElementById('root'));

我有文件 Button.js 包含

...
handleClick = () => {
this.props.clickHandler(this.props.name);
};

當我在命令行中運行時

node_modules\.bin\webpack app.tsx --config webpack-config.js

我收到一條錯誤消息：

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
|   //};
|
>   handleClick = () => {
|     this.props.clickHandler(this.props.name);
|   };

在 npm 文件夾中我有 ts-loader，所以我不明白是什么問題？ 更新 1. 我按照 Rich N 的建議進行了更改，現在它可以工作了。 但是我還是想用Button.js的原始內容：

import React from "react";
import PropTypes from "prop-types";
//import "./Button.css";

export default class Button extends React.Component {
static propTypes = {
name: PropTypes.string,    
clickHandler: PropTypes.func,
};

handleClick = () => {
this.props.clickHandler(this.props.name);
};

setImage= () => {
  var img="./Images/";
 switch(this.props.name)
 {
   case "move":
       img+="Move.jpg";
       break;
    case "drawPoint":
       img+="Point.jpg";
       break;
       default:
           console.log("default image")
 }
 return img;
 };

 render() {


 return (
  <div >
    <button onClick={this.handleClick}>
        <img src={this.setImage()} alt=""></img>
   </button>
  </div>
  );
  }
 }

當我嘗試運行該項目時，我收到了許多錯誤消息。 例如：

Error   TS2339  (TS) Property 'props' does not exist on type 'Button'.

我認為這是因為不是每個 JavaScript 代碼都是有效的 TypeScript 代碼。 所以我還有2個問題：

1. 如何更改此代碼以使其正確 TypeScript 代碼？
2. 是否有任何實用程序允許自動而不是手動執行此操作？

Answer 1

沒錯，如果您只是想在 TypeScript 項目中嘗試使用此代碼，那是很痛苦的。 您要么需要進行一些更改，以便為 TypeScript 正確鍵入 props 及其子項，要么更改導入以便不鍵入它們。 努力使 props 正確鍵入似乎毫無意義，因為代碼已經使用 prop-types 來鍵入它們。

但是，更改導入實際上並不太難。 只需像我原來的答案一樣使用您的 Button.js 代碼創建 Button.tsx，然后用下面的代碼替換import React from "React"和import PropTypes from "prop-types"語句。 如果你對它們進行 hover，你會看到這使得 React 和 PropTypes 類型為“any”，這意味着 TypeScript 不會嘗試對所有內容進行類型檢查。

declare var require: any
var React = require('react');
var PropTypes = require('prop-types');

請注意，您需要安裝 npm package 道具類型才能工作。 如果我這樣做，我可以在 app.tsx 中顯示帶有以下代碼的按鈕：

ReactDOM.render(<Button name="move"
    clickHandler={(x) => alert('Move')} />, document.getElementById('root'));

TypeScript 是否還有其他問題尚不清楚。 更好的選擇可能是將其變成 JavaScript 項目。 為此，您需要將 .tsx 文件更改為 .jsx 並在 Webpack 配置中使用 Babel 加載器來編譯它們。 如果你想這樣做，我可以更詳細地解釋一下：我實際上是作為練習做的，所以我有工作代碼。

在回答您的第二個問題時，沒有實用程序可以自動執行此操作。

我將在下面留下我的原始答案。

原始答案

我有點費力地弄清楚你在這里做什么。 但是，您似乎正在嘗試在教程示例中的 plain.js 文件中創建 React 'Button' 組件。 這是行不通的。 本教程設置了 Webpack 以將 TypeScript 轉換為 JavaScript，因此需要在 a.tsx 文件中添加 React 組件。

以下步驟將帶您進入一個有效的 Button 組件：

• 將 Button.js 重命名為 Button.tsx
• 然后將代碼更改為：

按鈕.tsx

declare var require: any
var React = require('react');

var buttonStyle = { background: 'red' };

export default class Button extends React.Component {
    render() {
        return (
        <button
            style = { buttonStyle }
            onClick = { this.props.handleClick } > { this.props.label }</button>
            );
    }
}

應用程序.tsx

declare var require: any
import Button from "./Button";
var React = require('react');
var ReactDOM = require('react-dom');

//export class Hello extends React.Component {
//    render() {
//        return (
//            <h1>Welcome to React!!</h1>
//        );
//    }
//}

//ReactDOM.render(<Hello />, document.getElementById('root'));
ReactDOM.render(<Button label="Click Me"
    handleClick={() => alert('Hello')} />, document.getElementById('root'));

順便說一句，如果您將所有代碼都包含在您的問題中，這將有所幫助，這樣我們就可以輕松地看到您的問題是什么。 在這種情況下，您需要展示的只是 app.tsx 和 Button.js，我們將有一個最小的可重現示例。