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

您有两种选择。

您可以在Users界面中定义MyState对象，如下所示：

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
}

Answer 2

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

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

2 个答案: