从 React ES6 迁移到 TypeScript：将 (This) 转换为类型答案

【问题标题】：Migrating from React ES6 to TypeScript: converting (This) to type从 React ES6 迁移到 TypeScript：将 (This) 转换为类型
【发布时间】：2017-10-24 22:00:08
【问题描述】：

我对 TypeScript 还很陌生，并且已经收到了一个基于 ES6 的 React 项目，并且希望迁移到 TypeScript 以获得更集成的状态。 a (this.) 之后的任何内容似乎都因错误而中断（类型“bar”上不存在属性“foo”）

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;

我的问题是这样的。我将如何在我的类语句中将内联定义转换为类型？

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

使用接口 (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()
    };
  }
  ...
}

【讨论】：

【解决方案2】：

在分配之前声明类的字段。例如：

class Clock extends Component {

    private state: { date: Date }

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

    // ...
}

或者如果state 应该是从Component 继承的，那么您的打字可能会遇到一些问题（npm install @typings/react）。

【讨论】：

这是否也适用于 (this.timerId) 语句？我的问题应该更清楚，但日期也是次要问题
是的，您可以使用private timerId: number（或public，具体取决于您的情况）
非常感谢，现在测试。我正在等待接受。
这似乎成功了。我不得不将它们全部切换为公开，以防止出现不正确的扩展错误。

【解决方案3】：

您需要添加正确的泛型参数并且需要定义类属性。见 cmets。

从'react'导入*作为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;

【讨论】：