reactjs - 如何使用带有对象的 React 状态设置 Typescript？

Question

我是 TypeScript 的新手。我了解如何为某些类型设置 interface(我猜)。但是似乎无法理解 Object 类型如何工作？

interface MyProps {
    defaultgreeting: 'Hello'
}

interface MyState {
    greeting: string
}

class MyApp extends Component<MyProps, MyState> {
    constructor(props: any) {
        super(props);
        this.state: {
            greeting: this.props.defaultgreeting
        }
    }
}

我将如何针对以下状态(需要 Object)进行设置？:

this.state: {
    greeting: this.props.defaultgreeting,
    users: {
        name: 'John Doe',
        age: 25
    }
}

Answer 1

您有几个选择。

您可以在 MyState 接口(interface)中定义 Users 对象，如下所示:

interface MyState {
    greeting: string;
    users: {
       name: string;
       age: number;
    }
}

或者，您可以在其他地方定义 Users 对象并将其类型分配给 users 属性，如下所示:

interface User {
   name: string;
   age: number;
}

interface MyState {
   greeting: string;
   users: User;
}

我通常更喜欢第二个选项，因为它可以让您自己键入对象，例如:

const users: User = {
   name: "John Doe",
   age: 25
}

您不能使用第一个选项来做到这一点。尽管您可以隐式分配它:

interface MyState {
    greeting: string;
    users: {
       name: string;
       age: number;
    }
}

const users = {
   name: "John Doe",
   age: 25
}

const state: MyState = {
   greeting: "Hello",
   users
}