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 type属性提供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或undefined：

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

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

¹对我来说，这个概念是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;，因为{{ 1}}的类型在结构上与a的类型兼容（在这种情况下，它们是相同的）。

这也是完全有效的：

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的类型没有的属性（rank）是可以的。它仍然与b的类型兼容。

通过打字稿的界面来反应状态

2 个答案: