如何在打字稿中添加任何类型答案

【问题标题】：How to add any of a type in typescript如何在打字稿中添加任何类型
【发布时间】：2021-08-06 19:26:06
【问题描述】：

我是打字稿的新手，我正在尝试制作一种具有另一种类型的类型：例如，我想做出如下的基本响应：

type Response = {
data: 'type of (any) ---> I want this to have a set type of a type or class I' create,
errors: null,
loading: false
}

然后我希望能够在类似的变量上使用上面的内容

const ordersResponse: Response<IOrder> = {
loading: false,
errors: null,
data: 'should be an array of entities that follow the IOrder type or interface'
}

有没有办法在打字稿中做到这一点？

【问题讨论】：

创建一个定义props类型的类或接口，见docs
data 是否总是某个数组？
不@Thomas 并非总是如此
那么最好将data的类型定义为数组类型：Response<IOrder[]>。因为否则您需要将data 的类型定义为T | T[] （如当前答案所示），这是不必要的歧义。只需使用type Response<T> = { data: T; etc. }

标签： javascript node.js typescript types

【解决方案1】：

你当前定义Response类型的方式，errors只能取值null和loading只能取值false。您必须使用适当的类型来定义它们。

要拥有通用的data 类型，您必须将Response 类型设置为generic

interface Response<T> {
  data : T | T[],
  errors: Error[] | null,  //or whatever the type of your error is
  loading: boolean
}


const aResponse : Response<IOrder> = {
  data: [{orderid: 1, ...}],
  errors: null,
  loading: false
}

使用这种方法，当访问您的 data 属性时，您仍然需要验证它是一个数组还是单个对象

if (Array.isArray(aResponse.data)) {
  const orderids = aResponse.data.map(x => x.orderid);
} else {
  const orderid = aResponse.data.orderid;
}

如果您可以在代码中预先确定响应是包含单个对象还是对象数组，则最好相应地定义类型。即

interface Response<T> {
  data : T,
  errors: Error[] | null,  //or whatever the type of your error is
  loading: boolean
}


const singleResponse : Response<IOrder> = {
  data: {orderid: 1, ...},
  errors: null,
  loading: false
}

const arrayResponse: Response<IOrder[]> = {
  data: [{orderid: 1, ...}],
  errors: null,
  loading: false
}

那么你就不需要检查你的data 属性，因为它是否是一个数组总是很清楚。

【讨论】：

当我尝试将元素推送到具有响应的类型时我收到错误“Order 类型的参数不可分配给 Order & Order[] 类型的参数”跨度>
请更新您的问题以反映您当前使用的代码...

【解决方案2】：

你试过|吗？

type Response<T> = {
  data: T | T[],
  errors: null,
  loading: false
}

interface IOrder {
  orderNo: number;
}

const ordersResponse: ResponseXyz<IOrder> = {
  loading: false,
  errors: null,
  data: [{ orderNo: 12345 }],
}

【讨论】：

【解决方案3】：

有几种方法可以实现这一点。您尝试使用界面的一种方法是：

创建两个类似这样的接口：

interface IOrder{
    field1: string,
    field2: string[],
    field3:boolean
    }

interface Response {
data: IOrder,
errors: string,
loading: boolean
 }

稍后在您的课程中，您可以像这样使用它：

ordersResponse: Response = {
               loading: false,
               errors: null,
               data: {
                   field1: "field1Value",
                   field2: ['element1', "element2"],
                   field3:false
               },
           }

由于您是 Typescript 的新手，仅供参考 - 您可以在类定义开始之前在同一个文件中创建这些接口，并在您的类中使用这些接口。或者，如果您希望它们在整个代码库中可用，请找出一些常见的 .ts 文件，在那里创建这些接口，然后将它们导入您的 .ts 文件并在您的代码中使用。

【讨论】：