接口属性是打字稿中另一个属性的类型

Question

假设我有一个像这样的打字稿界面：

interface MyInterface {
  property: string;
  setProperty: Dispatch<SetStateAction<string>>;

  property2: number;
  setProperty2: Dispatch<SetStateAction<number>>;

  property3: boolean;
  setProperty3: Dispatch<SetStateAction<boolean>>;
}

我有什么方法可以通过这样做来减少重复吗？

interface MyInterface {
  property: string;
  setProperty: Dispatch<SetStateAction<typeof property>>;

  property2: number;
  setProperty2: Dispatch<SetStateAction<typeof property2>>;

  property3: boolean;
  setProperty3: Dispatch<SetStateAction<typeof property3>>;
}

正如 ts 所说，这失败了

找不到名字

property

我可以使用一些替代语法来实现此目的吗？

Answer 1

我无法直接回答自引用接口，但是您可以使用两种方法来耦合状态和设置器类型：

为每个状态预定义类型并引用它们：

import { Dispatch, SetStateAction } from "react";

type PropStates = {
  property: string,
  property2: number,
  property3: boolean
}

interface MyInterface {
  property: PropStates['property'];
  setProperty: Dispatch<SetStateAction<PropStates['property']>>;

  property2: PropStates['property2'];
  setProperty2: Dispatch<SetStateAction<PropStates['property2']>>;

  property3: PropStates['property3'];
  setProperty3: Dispatch<SetStateAction<PropStates['property3']>>;
}

第二种更有趣的方法是创建一个实用程序类型，为您创建状态和设置器类型：

import { Dispatch, SetStateAction } from "react";

type Pascal<T extends string> = T extends `${infer I}${infer G}`
  ? `${Uppercase<I>}${G}`
  : never;

type StateAndSetter<N extends string, T> = {[x in N]: T} &
  { [x in `set${Pascal<N>}`]: Dispatch<SetStateAction<T>>};

type Props = {NonStateProp: number} & 
  StateAndSetter<"property", string> &
  StateAndSetter<"property2", number> &
  StateAndSetter<"property3", boolean>


let a: Props;

a.   // <- Check autocomplete options and their types (in the playground)

游乐场

如果您想使用

interface

语法，您可以使用

extends