通过打字稿的界面来反应状态[重复]

Posted 2023-02-22

【中文标题】通过打字稿的界面来反应状态[重复]

【英文标题】：Pass typescript's interface to react state [duplicate]

【发布时间】：2020-08-21 01:14:06

【问题描述】：

我是 TypeScript 的新手。我想通过打字稿的界面来反应状态，然后渲染状态。但是我不知道如何将接口值传递给反应状态。

import React,  useState  from 'react'

export interface Person 
  name: name
  age: age


type name = "John"
type age = 30
const Test = () => 

  const [state, setstate] = useState() //I want to pass the interface in here
  return (
    <div>
    <p> He is state.name and he is state.age years old</p> 
    </div>
  )

export default Test;

【参考方案1】：

您创建一个与接口匹配的对象，并将其传递给useState，如下所示：

const [state, setState] = useState(name: "John", age: 30);

您也可以明确说明该状态变量的类型，因为useState 是通用的：

const [state, setState] = useState<Person>(name: "John", age: 30);

但你不必如此。 TypeScript 的类型检查是结构性的，而不是名义上的，¹这意味着任何具有适当匹配属性的对象都是状态匹配。

如果您可能没有人，请允许null 或undefined：

const [state, setState] = useState<Person | null>(null);
// or
const [state, setState] = useState<Person | undefined>(undefined);

在这种情况下，由于类型将是 null 或 undefined，如果它只是从您传递给 useState 的内容中推断出来的，那么您需要在调用中使用泛型类型参数。

---

¹ 对我来说，这个概念是 TypeScript 的基础。 是一个 类型，而不是在（比如说）Java 中，它是一个 匹配 类型的东西。这是完全有效的 TypeScript：

interface A 
    name: string;
    age: number;

interface B 
    name: string;
    age: number;

let a: A = name: "Joe", age: 27;
let b: B;
b = a;

b被声明为B类型和a被声明为A类型没关系，你可以做b = a;，因为a的类型在结构上与@987654338兼容@ 的类型（在这种情况下，它们是相同的）。

这也是完全有效的：

interface A 
    name: string;
    age: number;
    rank: string;

interface B 
    name: string;
    age: number;

let a: A = name: "Joe", age: 27, rank: "Junior Petty Officer";
let b: B;
b = a;

a 的类型具有 b 的类型没有的属性 (rank) 没关系。它仍然兼容b的类型。

【讨论】：

（Doh！当然这是一个重复的问题。由于我已经完成了答案，所以我将其标记为社区 wiki 而不是删除它。）

【参考方案2】：

你可以用useState来定义接口类型

const [state, setstate] = useState<Person>(name: "John", age: 30 );

请务必根据 Person 类型属性提供 intialState。相反，如果你定义一个空对象，你可以这样写

const [state, setstate] = useState<Person>(Object);

您还可以通过显式定义将 useState 类型指定为 null 或未定义

const [state, setstate] = useState<Person | undefined>();

和

const [state, setstate] = useState<Person | null>(null);