typescriptの型チェック難しすぎる

Question

あるサイトのコードをそのままコピーして
画面が表示されるかテストしています。　　リンク

Next.js　×　Typescriptのログイン画面になります。

login.tsxにおいて、以下のメッセージが表示されましたので

Type error: Type 'null' is not assignable to type 'string'.

18 | this.state = {
19 | credentials: {

20 | email: null,

 |         ^

21 | password: null,
22 | },
23 | isLoading: false,

8～11行目を以下のように修正しましたが

  credentials: {
    email: string | any
    password: string | any
  }

今度は、別のエラーが発生します

Type error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ email: any; password: any; }'.
No index signature with a parameter of type 'string' was found on type '{ email: any; password: any; }'.

27 | handleCredentialsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
28 | let { credentials } = this.state

29 | credentials[e.target.name] = e.target.value

 |     ^

30 |
31 | this.setState({ credentials })
32 | }

どうすれば解消するのでしょうか

import * as React from 'react'
import Router from 'next/router'

import Layout from '../Components/layout'

interface LoginProps {}
interface LoginState {
  credentials: {
    email: string | any
    password: string | any
  }
  isLoading: boolean
}

class Login extends React.Component<LoginProps, LoginState> {
  constructor(props: LoginProps) {
    super(props)
    this.state = {
      credentials: {
        email: null,
        password: null,
      },
      isLoading: false,
    }
  }

  handleCredentialsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let { credentials } = this.state
    credentials[e.target.name] = e.target.value

    this.setState({ credentials })
  }

  handleLoginSubmit = (e: React.MouseEvent<HTMLElement>) => {
    e.preventDefault()
    this.setState({ isLoading: true })

    setTimeout(() => {
      this.setState({ isLoading: false })
      // ボタンを押された場合に /user へ画面遷移
      Router.push('/user')
      // Router.replace('/user')
    }, 1000)
  }

  public render() {
    return (
      <Layout title="Login" isHeader={false} isFooter={false}>
        <form action="">
          <div className="login-area">
            <div>
              <h1 className="">
                <img src="/static/yanatch_black.png" alt="my image" />
              </h1>
            </div>
            <article className="box is-rounded">
              <div className="field">
                <label className="label">Email</label>
                <p className="control has-icons-left">
                  <input className="input" type="email" placeholder="Email" />
                  <span className="icon is-small is-left">
                    <i className="fas fa-envelope"></i>
                  </span>
                </p>
              </div>
              <div className="field">
                <label className="label">Password</label>
                <p className="control has-icons-left">
                  <input className="input" type="password" placeholder="Password" />
                  <span className="icon is-small is-left">
                    <i className="fa fa-lock"></i>
                  </span>
                </p>
              </div>
              <div className="field">
                <p className="">
                  <button className="button is-medium is-info is-fullwidth" onClick={this.handleLoginSubmit}>
                    ログイン
                  </button>
                </p>
              </div>
            </article>
          </div>
        </form>
        <style jsx>
          {`
            .login-area {
              margin: 0 auto;
              min-width: 375px;
              max-width: 400px;
            }
            .box {
              padding-top: 3rem;
            }
            h1 {
              padding: 3rem 6rem;
              text-align: center;
            }

            .field {
              padding-bottom: 1.5rem;
            }
          `}
        </style>
      </Layout>
    )
  }
}

export default Login

Answer 1

以下の修正１と修正2の、どちらかうまく行きそうな方を採用する、ってことでどないでっか？

修正1

LoginStateは、

interface LoginState {
  credentials: {
    email: string
    password: string
  }
  isLoading: boolean
}

のままにしておいて、this.state.credentials の email　と password の初期値を空文字列にする。

    this.state = {
      credentials: {
-       email: null,
+       email: '',
-       password: null,
+       password: '',
      },

　　

または、

修正２

this.state.credentials　のほうは修正せずに

    this.state = {
      credentials: {
        email: null,
        password: null,
      },

のままにしておいて、LoginState の email と password の型を、以下のように null をユニオンで追加

interface LoginState {
  credentials: {
-   email: string
+   email: string | null
-   password: string
+   password: string | null
  }
  isLoading: boolean
}

追記

今度は、別のエラーが発生します

のほうの対応が抜けとったんで、追記します〜

先に書いた、修正1　と 修正2 のうち、 修正2 のほうを採用して、email および password の型を string | null 　にする方向で修正します。

まず、以下のように、LoginState から、email と password を持つ部分を Credentials として、個別のインターフェースとして切り出し、さらに、keyof Credentials に CredentialsProp という型エイリアスをつけておきます。

 interface LoginProps {}
+
+interface Credentials {
+  email: string | null
+  password: string | null
+}
+
+type CredentialsProp = keyof Credentials;
+
 interface LoginState {
-  credentials: {
-    email: string | any
-    password: string | any
-  }
+  credentials: Credentials
   isLoading: boolean
 }
 

ほんで、エラーの発生している以下の部分で、e.target.name に対して asによる型アサーションを追加します。

   handleCredentialsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let { credentials } = this.state
-    credentials[e.target.name] = e.target.value
+    credentials[e.target.name as CredentialsProp] = e.target.value
 
     this.setState({ credentials })
   }

以上で質問にあるエラーは消えると思いますわ〜。

Comments

[pokemonta]

修正１、修正２どちらを対応しても
以下のエラーを解消できませんでした
Type error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ email: string | null; password: string | null; }'.
No index signature with a parameter of type 'string' was found on type '{ email: string | null; password: string | null; }'.

27 | handleCredentialsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
28 | let { credentials } = this.state
> 29 | credentials[e.target.name] = e.target.value
| ^
30 |
31 | this.setState({ credentials })
32 | }

[退会済みユーザー]

回答に､上記エラーの対応を追記しました。

[pokemonta]

いけました。どうゆうテクニックですか。これは～