传递typeScript的接口以反应状态[重复]

Question

我是新的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;

Answer 1

您可以使用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);

Answer 2

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

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

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

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

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

如果你可能没有一个人，允许null或未定义的：

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

在这种情况下，因为类型将是null或un定义的，如果它只是从传递到useState的内容中推断出来的，所以在调用中需要泛型类型参数。

对我来说，这个概念是打字脚本的基础。与其说某物是一种类型，不如说它是Java中的类型，而是某物与一种类型相匹配。这是非常有效的类型脚本：

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声明为typeB和a声明为typeA都没关系，你可以做b=a；因为a的type是在结构上与b的类型兼容（在本例中，它们是相同的）。

这也是完全有效的：

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的类型兼容。