基于输入参数的 TypeScript 函数返回类型

Question

我有几个不同的接口和对象，每个都有type 属性。假设这些是存储在 NoSQL 数据库中的对象。如何根据输入参数type 创建具有确定性返回类型的通用getItem 函数？

interface Circle {
    type: "circle";
    radius: number;
}

interface Square {
    type: "square";
    length: number;
}

const shapes: (Circle | Square)[] = [
    { type: "circle", radius: 1 },
    { type: "circle", radius: 2 },
    { type: "square", length: 10 }];

function getItems(type: "circle" | "square") {
    return shapes.filter(s => s.type == type);
    // Think of this as items coming from a database
    // I'd like the return type of this function to be
    // deterministic based on the `type` value provided as a parameter. 
}

const circles = getItems("circle");
for (const circle of circles) {
    console.log(circle.radius);
                       ^^^^^^
}

类型“圆|”上不存在属性“半径”方”。

Answer 1

您正在寻找overload signatures

function getItems(type: "circle"): Circle[]
function getItems(type: "square"): Square[]
function getItems(type: "circle" | "square") {
    return shapes.filter(s => s.type == type);
}

在实际定义之前放置多个类型签名允许您列出函数签名可能落入的不同“情况”。

发表评论后编辑

所以事实证明，你想要的是可能，但我们可能需要跳过几个圈才能到达那里。

首先，我们需要一种方法来翻译每个名称。我们希望"circle" 映射到Circle，"square" 到Square 等等。为此，我们可以使用conditional type。

type ObjectType<T> =
  T extends "circle" ? Circle :
  T extends "square" ? Square :
  never;

（我使用never 作为后备，希望如果您以某种方式最终得到无效类型，它会很快产生类型错误）

现在，我不知道有一种方法可以像您要​​求的那样对函数调用的类型进行参数化，但是 Typescript 确实支持通过以下方式对对象的键进行参数化mapped typed。因此，如果您愿意将getItems("circle") 语法换成getItems["circle"]，我们至少可以描述类型。

interface Keys {
  circle: "circle";
  square: "square";
}

type GetItemsType = {
  [K in keyof Keys]: ObjectType<K>[];
}

问题是，我们现在必须真正构造一个这种类型的对象。如果你的目标是 ES2015（编译时--target es2015 或更新版本），你可以使用 Javascript Proxy 类型。现在，不幸的是，我不知道有什么好方法可以让 Typescript 相信我们正在做的事情是好的，所以通过any 快速转换将平息它的担忧。

let getItems: GetItemsType = <any>new Proxy({}, {
  get: function(target, type) {
    return shapes.filter(s => s.type == type);
  }
});

所以你失去了对实际getItems“函数”的类型检查，但你在调用站点获得了更强的类型检查。然后，拨打电话，

const circles = getItems["circle"];
for (const circle of circles) {
    console.log(circle.radius);
}

这值得吗？这取决于你。这是很多额外的语法，你的用户必须使用[] 表示法，但它会得到你想要的结果。

Answer 2

As you have mentioned that data is comming from No-Sql database with a type property. you can create type property as string value and change your interfaces as a class to check instanceOf in your function.

class Circle {
    type: string;
    radius: number;
}

class Square {
    type: string;
    length: number;
}

const shapes: (Circle | Square)[] = [
    { type: "circle", radius: 1 },
    { type: "circle", radius: 2 },
    { type: "square", length: 10 }];

function getItems(type: string) {
    return shapes.filter(s => s.type == type);
    // Think of this as items coming from a database
    // I'd like the return type of this function to be
    // deterministic based on the `type` value provided as a parameter. 
}

const circles = getItems("circle");
for (const circle of circles) {
    if (circle instanceof Circle) {
        console.log(circle.radius);
    } else if (circle instanceof Square) {
        console.log(circle.length);
    }
} 

Answer 3

Conditional Types 救援：

interface Circle {
    type: "circle";
    radius: number;
}

interface Square {
    type: "square";
    length: number;
}

type TypeName = "circle" | "square"; 

type ObjectType<T> = 
    T extends "circle" ? Circle :
    T extends "square" ? Square :
    never;

const shapes: (Circle | Square)[] = [
    { type: "circle", radius: 1 },
    { type: "circle", radius: 2 },
    { type: "square", length: 10 }];

function getItems<T extends TypeName>(type: T) : ObjectType<T>[]  {
    return shapes.filter(s => s.type == type) as ObjectType<T>[];
}

const circles = getItems("circle");
for (const circle of circles) {
    console.log(circle.radius);
}

感谢 Silvio 为我指明了正确的方向。