React typescript 引数の型エラー

Question

onChangeStateの引数にオブジェクトを渡してその引数をsetStateしたいのですが
onChangeState({lastName: e.target.value})}のとこで
以下のエラーが出ます。

型 '{ lastName: string; }' の引数を型 'User' のパラメーターに割り当てることはできません。
  Type '{ lastName: string; }' is missing the following properties from type 'User'

interface User {
  id: number;
  firstName: string;
  lastName: string;
}

const index:FC<Props> =  () => {
  const initialUser:User = {
    id: 0,
    firstName: '',
    lastName: '',
    mailAddress: '',
  };

  const initialState: IState = {
    newUser: initialUser,
  };

  const [state, setState] = useState<IState>(initialState);
  const { newUser } = state;


  const onChangState = (payload: User) => {
    setState({ ...state, newUser: ({ ...newUser, ...payload }) })
  }

 <div>
   <input
     placeholder="姓"
     value={user.lastName}
     onChange={(e) => onChangeState({lastName: e.target.value})}
    />
    </div>
    <div>
      <input
        placeholder="名"
        value={user.firstName}
        onChange={(e) => onChangeState({ firstName: e.target.value })}
      />
      </div>
 </div>

Answer 1

エラーメッセージのとおりです。{ lastName: string; }は、Userとして扱うにはプロパティが足りません。

onChangStateのpayloadの型をPartial<User>にしてみてはいかがでしょうか。

Comments

[satodesu]

治りました。ありがとうございます。
プロパティーが足りないとはどういうことだったのでしょうか？？
なぜ型をPartial<User>にしたらエラーが解消されたのでしょうか？
よければ教えて欲しいです

[maisumakun]

> プロパティーが足りないとはどういうことだったのでしょうか？？

書いてのとおりです。Userには「id」や「firstName」といったキーがありますが、「{lastName: e.target.value}」にはこれらのキーが存在しません。

Partial<型>は、「型」の持つ全部のキーを省略可能とした型という意味です。{lastName: e.target.value}もPartial<User>型の条件は満たします。

[whiwhdiw]

ありがとうございます！！！！！
理解できました！！！！！