时间戳

首页 > 解决方案 > 如何根据字符串值使接口属性有条件

typescript - 如何根据字符串值使接口属性有条件

问题描述

我有一个调用的函数getBooksPayload，它返回一个包含 3 个属性的对象。几个对象属性是基于属性areBooksThereInLibrary值的条件。

interface BooksList {
  areBooksThereInLibrary: string;
  numberOfHistoryBooks: number;
  numberOfScienceBooks: number;
}

const getBooksPayload = (areBooksThereInLibrary: string):BooksList  => {
  if (areBooksThereInLibrary === 'No') {
    return {
      areBooksThereInLibrary: "No"
    }
  }
  return {
    areBooksThereInLibrary: 'Yes',
    numberOfHistoryBooks: 10,
    numberOfScienceBooks: 100
  }
};

getBooksPayload("No");

默认情况下，我不想将属性设置为可选，如下所示：

interface BooksList {
      areBooksThereInLibrary: string;
      numberOfHistoryBooks?: number;
      numberOfScienceBooks?: number;
    }

努力编写映射的打字稿类型，其中几个属性（numberOfHistoryBooks，numberOfScienceBooks）根据属性值变为可选。

Below is the typescript playground link for a complete environment of this issue and in here the error is highlighted in red: https://www.typescriptlang.org/play/#code/JYOwLgpgTgZghgYwgAgEIHt0GsDOAZYHMZAbwFgAoZZOKCDbHAFQAtoIBJEAgIyloCeALmREooAOYBuStRABXALY9oAeRgAJQmHRQBDXCIXLoMqsmMqo6gMoJgEEEgM4jSq2YC+lSgnQgiZAkIMBcABTgBABt0OAATZABeZAAKWnpMXFZ2Ll5+PRExSQBKIRcCQKSAPlJZZGAYVPSXbLpc4D5BJMTkgHIAOXRe4trzagB6ceQuZDAWQmQEOBwIABpkFnQAd1n0ZEU4LBQAA0s1TW1dfUycY5oQBNP3c7sHJwzGO-QABzBgfzgUQAdHVqHQwPIoCBRtRYTQ6C02G1uB18sJkAAiQYY5Cg5DecwEsEhSHQ8hjeEfLJIzgozoFZC9ACaEBwvVWeLO1guRCuLhEAEYAAwcilc2z2RzOG6CoVCuoEzxmSjBUI3CLRWJxFJY9AY4pAA

标签： typescript

解决方案

你可以这样定义你BooksList：

type BooksList = {
  areBooksThereInLibrary: 'No';
} | {
  areBooksThereInLibrary: 'Yes';
  numberOfHistoryBooks: number;
  numberOfScienceBooks: number;
}

如果您愿意，可以定义 2 个命名子接口并将其定义BooksList为两者的联合。如果您以后想做一些类型保护，这可能会有所帮助。

推荐阅读