React+TypeScript函数组件解构props多类报错问题咨询

报错原因说明 #

所有报错本质上是两个语法误用导致的连锁反应：

1. 对象解构语法错误
   函数参数的对象解构中，冒号:的作用是重命名解构出的变量，而非标注类型。你当前的写法{name: string, age: number, title: string}相当于：
   • 把props.name的值赋值给名为string的变量
   • 把props.age的值赋值给名为number的变量
   • 把props.title的值赋值给名为string的变量（重复声明）
     直接连锁触发三个报错：
   • 重命名后的string/number变量从未被调用，触发「'string' is declared but its value is never read」提示
   • JSX中引用的name/age/title变量从未被定义，触发「Cannot find name 'age'/'title'」报错
   • 全局作用域下的name默认指向DOM API中已废弃的window.name属性，TS误匹配后触发「'name' is deprecated」提示
2. JSX注释语法错误
   JSX语法中不能直接使用//书写注释，注释内容必须包裹在花括号+块注释的格式内，否则注释内容会被解析为普通文本节点，导致标签内出现多个并列子节点，触发「This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided」报错。

修复后完整代码 #

import React from "react";

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

// 写法1：借助React.FC<IProps>自动推导props类型，直接解构属性即可
const 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>
    );
};

// 写法2：不依赖React.FC的类型推导，在参数位置显式标注props类型，两种写法效果一致
/*
const Customer = ({ name, age, title }: IProps) => {
    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;

易错点提醒 #

• 对象解构的类型标注必须写在整个解构对象的后方，格式为{ 解构属性1, 解构属性2 }: 接口/类型名，不要在单个解构属性后加冒号写类型，那是重命名语法
• JSX内合法注释格式为{/* 注释内容 */}，不要直接写// 注释或/* 注释 */，否则会被解析为渲染文本

内容的提问来源于stack exchange，提问作者code4cash