React ES6からTypeScriptへの移行：

Question

私はかなりTypeScriptを使い慣れており、ES6ベースの反応プロジェクトに手渡されました。さらに統合された状態のためにTypeScriptに移行したいと考えています。以下のもの（これ。）私の質問はこれです

import * as React from 'react'; 
import { Component } from 'react'; 
class Clock extends Component { 
    constructor(props: {}) { 
     super(props); 
     this.state = { 
      date: new Date() 
     }; 
    } 

    componentDidMount() { 
     this.timerId = setInterval(
      () => this.tick(), 500 
     ); 
    } 

    componentWillUnmount() { 
     clearInterval(this.timerId); 
    } 

    tick() { 
     this.setState({ 
      date: new Date() 
     }); 
    } 

    render() { 
     const options = { hour24: false }; 

     return (
      <div className="clockDesign">{this.state.date.toLocaleString('en-US', options)}</div> 
     ); 
    } 
} 

export default Clock; 

（タイプ「バー」上に存在しないプロパティ「foo」という）エラーで壊れているようです。インライン定義をクラスステートメント内の型に変換するにはどうすればよいですか？

Answer 1

クラスのフィールドを割り当てる前に宣言します。たとえば：

class Clock extends Component { 

    private state: { date: Date } 

    constructor(props: {}) { 
     super(props); 
     this.state = { 
      date: new Date() 
     }; 
    } 

    // ... 
} 

場合やstateは、その後、あなたのタイピング（npm install @typings/react）といくつかの問題を抱えているかもしれませんが、Componentから継承されることになっています。

Answer 2

使用インターフェース（https://www.typescriptlang.org/docs/handbook/interfaces.html）：

interface Props = { 

}; 

interface State = { 
    date: Date; 
} 

class Clock extends Component<Props, State> { 
    private timerId: any; 

    constructor(props: Props) { 
    super(props); 

    this.state = { 
     date: new Date() 
    }; 
    } 
    ... 
} 

Answer 3

あなたは正しいジェネリック引数を追加する必要があり、クラスのプロパティを定義する必要があります。コメントを参照してください。

import * as 'react'からの反応;

interface IProps { } 
interface IState { 
    date: Date; 
} 

class Clock extends React.Component<IProps, IState> { //You need to define both props and state 
    constructor(props: {}) { 
     super(props); 
     this.state = { 
      date: new Date() 
     }; 
    } 

    timerId: any; //Props needs to be defined; 
    componentDidMount() { 
     this.timerId = setInterval(
      () => this.tick(), 500 
     ); 
    } 

    componentWillUnmount() { 
     clearInterval(this.timerId); 
    } 

    tick() { 
     this.setState({ 
      date: new Date() 
     }); 
    } 

    render() { 
     const options = { hour24: false }; 

     return (
      <div className="clockDesign"> {this.state.date.toLocaleString('en-US', options)} </div> 
     ); 
    } 
} 

export default Clock;