主页 / 问题 / 1506052
Accepted
EgorG
Asked:2023-03-18 19:02:13 +0000 UTC2023-03-18 19:02:13 +0000 UTC

打字稿中的超类型和子类型

  • 772

我正在用 react/typescript 制作一个应用程序。该应用程序有自己的 ui 套件，其中包含可重复使用的组件 - 选择、输入、按钮等。因此，这些组件的不同消费者有自己的类型。

无法键入选择。简化示例 - https://codesandbox.io/s/silly-albattani-h95cfj

道具类型是selectedItem：

type SelectedItem = { value: string | number; label?: string; };

和 onChange 道具：

(option: SelectedItem) => void

使用这个组件的地方，我想把这个类型扔到 selectedItem prop

type City = { value: string; label: string }

在 onChange 道具中：

 (city: City) => void

我希望 Select 组件中声明的类型是supertypes，然后：

  1. City 类型将是SelectedItem 的子类型
  2. 类型 (city: City) => void 将是(option: SelectedItem) => void 的子类型

第一个有效，但第二个无效。

在此处输入图像描述

这就像 ts 考虑 (city: City) => void a supertype and type (option: SelectedItem) => void a subtype

reactjs

2 个回答

  1. Best Answer

    该组件需要一个可以同时接受number和 的函数string。

    您传递的函数只能接受string. 因此，它不能被使用。

    例如：

    有一个类型

    type P = string | number;

    有一个函数类型

    type Callback = (param: P) => void;

    以及这种类型的变量：var cb: Callback.

    假设在这个变量中你可以写一个函数只接受string

    var cb:Callback = (p:string) => console.log(p.length);

    在这种情况下，调用有问题cb(10)。

    1. type Callback- 允许这样的调用，因为参数的类型可以是字符串或数字。

    2. 赋值函数 - 不允许，因为它要求参数只能是一个字符串。

    因此，分配本身也是不允许的。

    • 1

  2. 您甚至没有传递所有参数，并且通常是类型垃圾。一个例子必须先被带到正常状态，然后再问。

    总的来说，我明白了。但是，如果您没有遗漏参数options，可能可以使用更简单的方法，但我现在太懒了。

    https://codesandbox.io/s/confident-currying-t8pi8w?file=/src/ui-kit/Select.tsx

    export type SelectedItem<T extends number | string> = {
  value: T;
  label?: string;
};

type SelectProps<T extends SelectedItem<any>> = {
  selectedItem: T;
  onChange: (opt: T) => void;
  options: T[];
};

export function Select<T extends SelectedItem<any>>({ selectedItem, onChange, options }: SelectProps<T>) {
  return null;
}

    import "./styles.css";
import { useState } from "react";
import { Select } from "./ui-kit/Select";

type City = { value: string; label: string };

const cities: City[] = [];

export default function App() {
  const [value, setValue] = useState<City>({
    value: "1",
    label: "Moscow"
  });

  const handleChange = (opt: City) => {
    setValue(opt);
  };

  return (
    <div className="App">
      <Select onChange={handleChange} selectedItem={value} options={cities} />
    </div>
  );
}
    • 0

相关问题