在 TypeScript 中使用对象的键属性

Posted 2023-03-13

【中文标题】在 TypeScript 中使用对象的键属性

【英文标题】：Using a key property from object in 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

【参考方案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://***.com/a/44147953/1485573