在 TypeScript 中使用对象的键属性答案

【问题标题】：Using a key property from object in TypeScript在 TypeScript 中使用对象的键属性
【发布时间】：2021-12-29 20:49:42
【问题描述】：

这是一个组件：

import { useAppSelector } from "../../hooks";
import IUser from "../../models/user";

const Header: FC = () => {
    const [btn, setBtn] = useState(false);
    const user: IUser | null = useAppSelector( state => state.user );

    const btn_click = () => {
        setBtn(!btn);
    }
    console.log(user, "user"); // consoles.log( { _id: 2452345, name: "Eldar" } )

    return(
            <div>
            { user ? 
                <button className={ style.header__button } }> { user.name } </button> :
                <button className={ style.header__button } onClick={ () => btn_click() }> Reg </button> }
            { btn && <ModalWrapper>
                        <SignIn/>
                    </ModalWrapper> }
        </div>
    )
}

export default Header

喜欢打字稿，但当我遇到这些错误时，我会发疯。基本上取决于用户想要放置这个或那个按钮。因此有user ? 然后在用户登录的按钮中我想输入用户名，但它给了我错误

“从不”类型上不存在属性“名称”

无论是否有用户，它都应该可以工作，但即使有用户也会给我这个错误。

下面的模型用户

export default interface IUser {
    _id: string,
    name: string
}

【问题讨论】：

标签： javascript reactjs typescript redux jsx

【解决方案1】：

下面的代码应该适合你。

import { useAppSelector } from "../../hooks";
import IUser from "../../models/user";

const Header: FC = () => {
    const [btn, setBtn] = useState(false);
    const user: IUser | null = useAppSelector( state => state.user );

    const btn_click = () => {
        setBtn(!btn);
    }
    console.log(user, "user"); // consoles.log( { _id: 2452345, name: "Eldar" } )

    return(
            <div>
            { user ? 
                <button className={ style.header__button } }> { user?.name } </button> :
                <button className={ style.header__button } onClick={ () => btn_click() }> Reg </button> }
            { btn && <ModalWrapper>
                        <SignIn/>
                    </ModalWrapper> }
        </div>
    )
}

export default Header

这个答案可能会让您更深入地了解为什么会发生这种情况：https://stackoverflow.com/a/44147953/1485573

【讨论】：