代码之家 › 专栏 › 技术社区 › Daan

如何设置一个对象具有反应状态的Typescript?

typescript reactjs

Daan · 技术社区 · 7 年前

我不熟悉打字。我知道如何建立一个 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
        }
    }
}

我将如何为以下状态设置此设置(它需要 )?:

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

2 回复 | 直到 7 年前

DeeV 7 年前

你有几个选择。

你可以定义 Users MyState 界面如下:

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

或者,你可以定义 用户 对象,并将其类型指定给 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
}

hackape 7 年前

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

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前