React Typescriptの型の定義について

Question

知りたいこと
Reactの初心者かつ、Typescriptの超初心者です。
勉強でreact+typescriptで簡単なTodoアプリを作っています。（react.jsではできました)
型の定義をうまくできずにいます。
型の定義の仕方を知りたいです。

TypeScript error in /Users/nishikawa.keien/react-ts/src/components/Postform.tsx(26,25):
Property 'title' does not exist on type 'Readonly<{}>'.  TS2339

    24 |
    25 |     const post ={
  > 26 |       title: this.state.title,
       |                         ^
    27 |       body: this.state.body
    28 |     }
    29 |     // Call action

  constructor(props: any){
    super(props);
    this.state = {
        title: '',
        body: ''
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onChange(e: any){
    this.setState({ [e.target.name]: e.target.value });
  }

  onSubmit(e: any){
    e.preventDefault();

    const post ={
      title: this.state.title,
      body: this.state.body
    }
    // Call action
    this.props.createPost(post);
  }

Answer 1

先ずはどのような値がコンポネントで必要とされているか、interfaceを使って型定義します。

interface PostFormProps{
    // ここに変わらないパラメータを定義
}

interface PostFormState{
    // ここにRuntimeで変わるパラメータを定義
    title: string;
    body: string;
}

基本はパラメータ名: 型のパターンで定義します。
Javascriptでは型を意識する場面は少ないですが、Typescriptは型のためにあるといっても過言ではないのでしっかり型を定めたほうがいいです。anyはなんでも許容してくれるので入門には便利ですが、使いすぎるとTypescriptの"旨み"を甘受できないのでお勧めしません。

続いて先程のクラスを型を使えるように再定義します。
何のクラスか、何を継承しているのかを明示する作業をしただけなので煩雑に見えるかもしれませんが、やっていることは何ら変わりません。

export class PostForm extends React.Component<PostFormProps, PostFormState> {
    constructor(props: PostFormProps) {
        super(props);
        this.state = {
            title: '',
            body: ''
        };

        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onChange(e: any) {
        this.setState({ [e.target.name]: e.target.value });
    }

    onSubmit(e: any) {
        e.preventDefault();

        const post = {
            title: this.state.title,
            body: this.state.body
        }
        // Call action
        this.props.createPost(post);
    }
}

eも実はReact.ChangeEvent<HTMLInputElement>という型なので慣れたらany型から切り替えてもいいかもしれません。

Comments

[capra314cabra]

因みにエラーの原因はthis.stateの中にtitleという変数が定義されていることが明示されていなかったからです。Javascript的にはOKですが、Typescriptはもし変数が存在しないのにアクセスしたらどうしようと考えエラーを出します。

[nanase21]

返信遅くなり申し訳ございません。
無地に解決することができました。