'string' 已声明，但其值从未被读取

Question

正在尝试学习一些 Typescript，但早早遇到了错误。尽管我正在学习教程，但我遇到了很多错误。我已经注释掉了我收到的错误。如果有人可以解释为什么会发生这些问题，以及如何解决这些问题，那就太好了。

import React from "react";

interface IProps {
    name: string;
    age: number;
    title: string;
}

let Customer: React.FC<IProps> = ({
    name: string,
    //'string' is declared but its value is never read.
    age: number,
    title: string,
    //'string' is declared but its value is never read.
}) => {
    return (
        <React.Fragment>
            <h2>Customer Component</h2>
            <ul className="list-group">
                <li className="list-group-item">Name: {name}</li>
                {/* //This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.ts(2746) */}
                {/* 'name' is deprecated.ts(6385) */}
                {/* lib.dom.d.ts(17329, 5): The declaration was marked as deprecated here. */}
                <li className="list-group-item">Age: {age}</li>
                {/* Cannot find name 'age'. */}
                <li className="list-group-item">Title: {title}</li>
                {/* Cannot find name 'title'. */}
            </ul>
        </React.Fragment>
    );
};

export default Customer;

Answer 1

let Customer: React.FC<IProps> = ({
    name: string,
    //'string' is declared but its value is never read.
    age: number,
    title: string,
    //'string' is declared but its value is never read.
}) => {

IProps 是您定义具有特定类型的所有属性的接口。右侧您将其用作变量。您正在破坏对象，因此只需定义 {name, age, title}.

这样的名称

如果您在右侧使用 name: string，则您将 name 重命名为 string。字段 name 取自图书馆，这就是您收到该错误的原因。在第二行，没有 age 变量，因为您将其重命名为 number.

这是更新后的代码。

import React from "react";

interface IProps {
  name: string;
  age: number;
  title: string;
}

let Customer: React.FC<IProps> = ({
  name,
  age,
  title,
}) => {
  return (
    <React.Fragment>
      <h2>Customer Component</h2>
      <ul className="list-group">
        <li className="list-group-item">Name: {name}</li>
        <li className="list-group-item">Age: {age}</li>
        <li className="list-group-item">Title: {title}</li>
      </ul>
    </React.Fragment>
  );
};

export default Customer;

你可以阅读Object Destructuring assignment and

'string' 已声明，但其值从未被读取

'string' is declared but its value is never read

reactjs

typescript

components

react-functional-component