Question

我试图定义一个可以包含数据或错误的对象。

export type ActionResult = {
  data: any;
} | {
  error: any;
};

function test():ActionResult {
    return {
        data: 3
    }
}

当尝试访问该函数的结果时，我得到：

const v = test();
v.data = 23; // Property 'data' does not exist on type 'ActionResult'.  Property 'data' does not exist on type '{ error: any; }'

访问“数据”或“错误”的正确方法是什么？

Answer 1

TypeScript理解您的代码的方式：

const v = test();
// v: {data: any} | {error: any}
v.data = 23;
// It is possible that 'v' is of type '{error: any}'
// In this case, an error might happen at runtime
// This error must be prevented right now - time to throw a TS error!

确保不会发生这种情况的一种方法是使用type guard将联合类型限制为不会引发TS错误的类型：

const v = test();
// v: {data: any} | {error: any}
if ('data' in v) {
  // v: {data: any}
  v.data = 23;
  // no error!
}

您还可以通过在定义时强制转换v来告诉TypeScript您确定data将具有v：

const v = (test() as {data: any});
v.data = 23;

在typescript playground上检查此代码

Answer 2

这是带有区分联合的解决方案（我已向每个联合成员添加了一个公共属性dataType）：

export type ActionResult = {
  dataType: "value",  
  data: any
} | {
  dataType: "error",  
  error: any
};

function test():ActionResult {
    return {
        dataType: "value",
        data: 3
    }
}

const v = test();
if ("value" === v.dataType){
   v.data = 23;
}

在打字稿中定义对象形状变体

2 个答案: