Question

我是TypeScript的新手，已经交付了基于ES6的反应项目，并希望迁移到TypeScript以获得更加集成的状态。跟随（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;

我的问题是这个。我如何将内联定义转换为类声明中的类型？

Answer 1

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

class Clock extends Component {

    private state: { date: Date }

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

    // ...
}

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

Answer 2

使用接口（https://www.typescriptlang.org/docs/handbook/interfaces.html）：

Private Sub RunErrors55COPY_Click()
On Error GoTo Err_RunErrors55_Click

Dim MyPath As String
Dim MyFilename As String
Dim uniqueID As Recordset
Dim Report_ID As Field
Dim Db As Database
MyPath = "\\test.net\files\bissvcs\Services\Errors\"

Set Db = CurrentDb()
Set uniqueID = Db.OpenRecordset("ReportIdent01")

'Loop structure may vary depending on how you obtain values
For Each uniqueID In Report_ID
    MyFilename = "Bsvc Error " & Report_ID & ".pdf"
'Open report preview and auto-save it as a PDF
    DoCmd.OpenReport "Report01 Error Check", acViewPreview, , "uniqueID = " & Report_ID
    DoCmd.OutputTo acOutputReport, "Report01 Error Check", acFormatPDF, MyPath & MyFilename, False
'Close the previewed report
    DoCmd.Close acReport, "Report01 Error Check"
Next uniqueID

Exit_RunErrors55_Click:
    Exit Sub

Err_RunErrors55_Click:
    MsgBox Err.Description
    Resume Exit_RunErrors55_Click

End Sub

Answer 3

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

从'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;

从React ES6迁移到TypeScript：将（This）转换为type

3 个答案: