使用 React 將參數傳遞給 Typescript 通用 class 時出錯

Question

我想使用 React Components 來構建一個庫。

我有一個帶有 ComponentProps 的組件抽象 class（母組件 class）：

import * as React from "react";

/**
 * Main components properties
 * */
export interface ComponentProps {
    ContainerId: string,
    Id: string,
    CssClass: Array<string>,
    Attributes: Map<String, String>,
    Events: Map<String, String>
}

/**
 * Main component class
 * */
export default abstract class Component<Props extends ComponentProps>
    extends React.Component<Props & ComponentProps, {}> {

}

TextBox class 擴展了 Component abstract class，帶有 TextBoxProps，擴展了 ComponentProps：

import * as React from "react";
import Component, { ComponentProps } from "../Component";
import { useState } from 'react';

export interface TextBoxProps extends ComponentProps {
    /**
     * Value of textbox
     * */
    Value: string,
    /**
     * Placeholder of textbox
     * */
    PlaceHolder: string
}

export default class TextBox<Props extends TextBoxProps> extends Component<Props & TextBoxProps> {
    render() {
        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
            console.log("New value : " + event.target.value);
        };

        return (
            <div id={this.props.Id + "_cnt"}>
                <input
                    defaultValue={this.props.Value}
                    placeholder={this.props.PlaceHolder}
                    onChange={handleChange} />
            </div>
        );
    }
}

當我嘗試將 TextBox 組件與 TextBoxProps 一起使用時，它在 Visual Studio 上工作，但在 Visual Studio Code 上，出現此錯誤：

通用類型“TextBox”需要 1 個類型參數。 TS(2314)

Visual Studio Code 文本框的錯誤

任何人都知道我做錯了什么？

編輯：我當前的 tsconfig

{
  "compilerOptions": {
    // Default
    "target": "es5",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,

    // Added
    "jsx": "react",
    "module": "ESNext",
    "declaration": true,
    "declarationDir": "types",
    "sourceMap": true,
    "outDir": "dist",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "emitDeclarationOnly": true
  }
}

Answer 1

我檢查了你的代碼。 這兒存在一個問題。

當你想用 react-dom 渲染某些東西時，你應該在 .tsx 文件而不是 .ts 文件中進行。

將 src/components/index.ts 更改為 src/components/index.tsx 將解決您的問題。