Làm thế nào để truy cập được lưu trữ lồng nhau với Pick <> typecript

map chức năng là dành cho mảng, vì vậy tôi sẽ giả sử các sản phẩm products của bạn chìa khóa trong ví dụ của bạn là một mảng chứ không phải một đối tượng.

Đầu tiên, tôi khuyên bạn nên viết đúng định nghĩa loại cho phản hồi sản phẩm của bạn nếu bạn chưa viết

Giao diện

interface IProduct {
  _id: string,
  category: number,
  gender: number,
  title: string,
  description: string,
  price: number,
  imageFileName: string,
  createdAt: string,
  updatedAt: string,
  __v: number
}

interface IResponse {
  _id: string;
  products: IProduct[];
}

Sau đó, để lấy Pick làm việc trên một product , bạn có thể lập chỉ mục IResponse giao diện bằng cách sử dụng Loại truy cập được lập chỉ mục . Bạn muốn product thuộc tính tại một index bởi vì nó là một mảng.

/*

Indexed Access Types

type Person = { age: number, name: string }[];
type Age = Person[number]["age"];

*/

type Products = ReadonlyArray<
  Pick<
    IResponse["products"][number],
    "_id" | "gender" | "title" | "description" | "price" | "imageFileName"
  >
>;

Nếu bạn định làm điều gì đó như Pick<IResponse["products"], '_id'...> bạn đang cố gắng sử dụng Pick để trích xuất các thuộc tính từ một mảng, điều này sẽ dẫn đến lỗi.

Và việc duy nhất còn lại là lập bản đồ các sản phẩm từ phản hồi đến hình dạng đối tượng mong muốn.


// Query your products

const { products }: IResponse = {
  _id: "611e2febb863ce74ac448220",
  products: [
    {
      _id: "6116a9ecc3e98d500c5e523d",
      category: 5,
      gender: 1,
      title: 'sivdosi',
      description: 'oisbdvoi',
      price: 2394,
      imageFileName: 'http://localhost:3000/images/1628875244435-3564.png',
      createdAt: "2021-08-13T17:20:44.472Z",
      updatedAt: "2021-08-13T17:20:44.472Z",
      __v: 0
    }
  ]
}

// Get the desired object

const pickedProducts: Products = products.map(({ _id, gender, title, description, price, imageFileName }) => ({
  _id,
  gender,
  title,
  description,
  price,
  imageFileName
}));

Kết quả cuối cùng trông giống như sau

Giao diện

interface IProduct {
  _id: string,
  category: number,
  gender: number,
  title: string,
  description: string,
  price: number,
  imageFileName: string,
  createdAt: string,
  updatedAt: string,
  __v: number
}

interface IResponse {
  _id: string;
  products: IProduct[];
}

type Products = ReadonlyArray<
  Pick<
    IResponse["products"][number],
    "_id" | "gender" | "title" | "description" | "price" | "imageFileName"
  >
>;

// Query your products

const { products }: IResponse = {
  _id: "611e2febb863ce74ac448220",
  products: [
    {
      _id: "6116a9ecc3e98d500c5e523d",
      category: 5,
      gender: 1,
      title: 'sivdosi',
      description: 'oisbdvoi',
      price: 2394,
      imageFileName: 'http://localhost:3000/images/1628875244435-3564.png',
      createdAt: "2021-08-13T17:20:44.472Z",
      updatedAt: "2021-08-13T17:20:44.472Z",
      __v: 0
    }
  ]
}

// Get the desired object

const pickedProducts: Products = products.map(({ _id, gender, title, description, price, imageFileName }) => ({
  _id,
  gender,
  title,
  description,
  price,
  imageFileName
}));

Liên kết sân chơi TypeScript