Javascript 使用JSON在Typescript中定义多个类型

我正在导入一个值为不同类型的JSON文件。JSON如下所示：

  "l157Logo": "l157.svg",
  "l157": [],
  "l2Logo": "l2.png",
  "l2": [
    {
      "businessName": "Bricklayers Allied Craftworkers Local 2 NY/VT",
      "website": "www.bac2nyvt.org",
      "phone": "518-456-5477",
      "logo": null
    },
    {
      "businessName": "Bricklayers Allied Craftworkers Local 2 NY/VT Joint Benefit Funds",
      "website": "www.bac2funds.com",
      "phone": "518-456-0259",
      "logo": null
    }
  ]
}

type unionsJSONSType = {
  [key: string]: {
    businessName: string;
    website: string;
    phone: string;
    logo: string | null;
  }[] | string;
};

 const unionsFile: unionsJSONSType = unionsJSONS;
 const unionLogo = unionsFile[`${union}Logo`];

    {unionsFile[union].length > 0 &&
                unionsFile[union].map((provider, index) => {
                  return <SPBusinesses provider={provider} index={index} />;
                })}

我制作了一个类似这样的类型：

  "l157Logo": "l157.svg",
  "l157": [],
  "l2Logo": "l2.png",
  "l2": [
    {
      "businessName": "Bricklayers Allied Craftworkers Local 2 NY/VT",
      "website": "www.bac2nyvt.org",
      "phone": "518-456-5477",
      "logo": null
    },
    {
      "businessName": "Bricklayers Allied Craftworkers Local 2 NY/VT Joint Benefit Funds",
      "website": "www.bac2funds.com",
      "phone": "518-456-0259",
      "logo": null
    }
  ]
}

type unionsJSONSType = {
  [key: string]: {
    businessName: string;
    website: string;
    phone: string;
    logo: string | null;
  }[] | string;
};

 const unionsFile: unionsJSONSType = unionsJSONS;
 const unionLogo = unionsFile[`${union}Logo`];

    {unionsFile[union].length > 0 &&
                unionsFile[union].map((provider, index) => {
                  return <SPBusinesses provider={provider} index={index} />;
                })}

在我对typescript有限的理解中，我是说值可以是对象数组或字符串。这对我来说是有意义的，但对编译器来说不是

我分配的类型如下：

  "l157Logo": "l157.svg",
  "l157": [],
  "l2Logo": "l2.png",
  "l2": [
    {
      "businessName": "Bricklayers Allied Craftworkers Local 2 NY/VT",
      "website": "www.bac2nyvt.org",
      "phone": "518-456-5477",
      "logo": null
    },
    {
      "businessName": "Bricklayers Allied Craftworkers Local 2 NY/VT Joint Benefit Funds",
      "website": "www.bac2funds.com",
      "phone": "518-456-0259",
      "logo": null
    }
  ]
}

type unionsJSONSType = {
  [key: string]: {
    businessName: string;
    website: string;
    phone: string;
    logo: string | null;
  }[] | string;
};

 const unionsFile: unionsJSONSType = unionsJSONS;
 const unionLogo = unionsFile[`${union}Logo`];

    {unionsFile[union].length > 0 &&
                unionsFile[union].map((provider, index) => {
                  return <SPBusinesses provider={provider} index={index} />;
                })}

当我试图像这样绘制地图时：

  "l157Logo": "l157.svg",
  "l157": [],
  "l2Logo": "l2.png",
  "l2": [
    {
      "businessName": "Bricklayers Allied Craftworkers Local 2 NY/VT",
      "website": "www.bac2nyvt.org",
      "phone": "518-456-5477",
      "logo": null
    },
    {
      "businessName": "Bricklayers Allied Craftworkers Local 2 NY/VT Joint Benefit Funds",
      "website": "www.bac2funds.com",
      "phone": "518-456-0259",
      "logo": null
    }
  ]
}

type unionsJSONSType = {
  [key: string]: {
    businessName: string;
    website: string;
    phone: string;
    logo: string | null;
  }[] | string;
};

 const unionsFile: unionsJSONSType = unionsJSONS;
 const unionLogo = unionsFile[`${union}Logo`];

    {unionsFile[union].length > 0 &&
                unionsFile[union].map((provider, index) => {
                  return <SPBusinesses provider={provider} index={index} />;
                })}

---

让我们看看导致问题的部分：

unionsFile[union].map

unionsFile

属于

unionsJSONSType

类型，这意味着它是一个值为数组或字符串的对象

unionsFile[union]

尝试访问

unionsFile

上的字段，即

union

计算结果的字段

---

根据字段的不同，相应的值可能是“array”类型，但也可能是“string”类型。由于字符串没有

map

属性，TypeScript会正确地抱怨，因为您可能试图对字符串调用

map

，这将在运行时引发异常。

让我们看看导致问题的部分：

unionsFile[union].map

unionsFile

属于

unionsJSONSType

类型，这意味着它是一个值为数组或字符串的对象

unionsFile[union]

尝试访问

unionsFile

上的字段，即

union

计算结果的字段

---

根据字段的不同，相应的值可能是“array”类型，但也可能是“string”类型。由于字符串没有

map

属性，TypeScript会正确地抱怨，因为您可能试图对字符串调用

map

，这将在运行时引发异常。

TypeScript对您定义的内容非常严格。无论该类型是字符串还是数组，都不能中断对该类型的使用<如果是字符串，则代码>映射将中断。请注意，数组和字符串都有

长度

，TypeScript不会说任何东西。但您的联合定义中只有一部分具有

映射

。因此，您已经告诉TypeScript，您正面临编译错误的风险

通过显式检查

数组

正确处理这种情况

//正确检查数组
{Array.isArray（unionsFile[union]）&&
unionsFile[union].map（（提供程序，索引）=>{
返回；
})}

TypeScript对您的定义非常严格。无论该类型是字符串还是数组，都不能中断对该类型的使用<如果是字符串，则代码>映射将中断。请注意，数组和字符串都有

长度

，TypeScript不会说任何东西。但您的联合定义中只有一部分具有

映射

。因此，您已经告诉TypeScript，您正面临编译错误的风险

通过显式检查

数组

正确处理这种情况

//正确检查数组
{Array.isArray（unionsFile[union]）&&
unionsFile[union].map（（提供程序，索引）=>{
返回；
})}

本质上，您是在创建数组和字符串的联合类型，然后尝试访问仅对数组可用的方法。简而言之，它看起来是这样的：

  "l157Logo": "l157.svg",
  "l157": [],
  "l2Logo": "l2.png",
  "l2": [
    {
      "businessName": "Bricklayers Allied Craftworkers Local 2 NY/VT",
      "website": "www.bac2nyvt.org",
      "phone": "518-456-5477",
      "logo": null
    },
    {
      "businessName": "Bricklayers Allied Craftworkers Local 2 NY/VT Joint Benefit Funds",
      "website": "www.bac2funds.com",
      "phone": "518-456-0259",
      "logo": null
    }
  ]
}

type unionsJSONSType = {
  [key: string]: {
    businessName: string;
    website: string;
    phone: string;
    logo: string | null;
  }[] | string;
};

 const unionsFile: unionsJSONSType = unionsJSONS;
 const unionLogo = unionsFile[`${union}Logo`];

    {unionsFile[union].length > 0 &&
                unionsFile[union].map((provider, index) => {
                  return <SPBusinesses provider={provider} index={index} />;
                })}

const data=[['arr']，'str']
常量foo:string[]| string=data[0]
foo.map（x=>x）

现在Typescript知道它是数组或字符串。有了这些知识，就不能保证有

map

方法。它可能是一个字符串，在运行时会失败。因此，它抱怨此类型上不存在

map

方法

---

我认为这个问题有两种解决办法：

使用

Array.isArray

确保它是一个数组

const data=[['arr']，'str']
常量foo:string[]| string=data[0]
if（Array.isArray（foo））
foo.map（x=>x）

重写类型定义，使其必须是数组

---

如果您知道json中的特定键包含数组，您可以在类型中定义它。

本质上，您是在创建数组和字符串的联合类型，然后尝试访问仅对数组可用的方法。简而言之，它看起来是这样的：

  "l157Logo": "l157.svg",
  "l157": [],
  "l2Logo": "l2.png",
  "l2": [
    {
      "businessName": "Bricklayers Allied Craftworkers Local 2 NY/VT",
      "website": "www.bac2nyvt.org",
      "phone": "518-456-5477",
      "logo": null
    },
    {
      "businessName": "Bricklayers Allied Craftworkers Local 2 NY/VT Joint Benefit Funds",
      "website": "www.bac2funds.com",
      "phone": "518-456-0259",
      "logo": null
    }
  ]
}

type unionsJSONSType = {
  [key: string]: {
    businessName: string;
    website: string;
    phone: string;
    logo: string | null;
  }[] | string;
};

 const unionsFile: unionsJSONSType = unionsJSONS;
 const unionLogo = unionsFile[`${union}Logo`];

    {unionsFile[union].length > 0 &&
                unionsFile[union].map((provider, index) => {
                  return <SPBusinesses provider={provider} index={index} />;
                })}

const data=[['arr']，'str']
常量foo:string[]| string=data[0]
foo.map（x=>x）

现在Typescript知道它是数组或字符串。有了这些知识，就不能保证有

map

方法。它可能是一个字符串，在运行时会失败。因此，它抱怨此类型上不存在

map

方法

---

我认为这个问题有两种解决办法：

使用

Array.isArray

确保它是一个数组

const data=[['arr']，'str']
常量foo:string[]| string=data[0]
if（Array.isArray（foo））
foo.map（x=>x）

重写类型定义，使其必须是数组

---

如果您知道json中的特定键包含数组，您可以在类型中定义它。

TypeScript是否足够聪明，可以通过在代码中检测是否在运行时手动检查“数组性”来不显示与类型相关的警告？TypeScript有，这是确保变量为特定类型的函数。如果我没有弄错的话，

Array.isArray

是一个预定义的数组（除了

typeof

、

instanceof

和其他一些可能）。如果您所在的分支中此检查返回true，则typescript知道它必须是这种类型。typescript是否足够聪明，不会通过在代码中检测是否在运行时手动检查“数组是否正确”来显示与类型相关的警告？typescript有，这是确保变量为特定类型的函数。如果我没有弄错的话，

Array.isArray

是一个预定义的数组（除了

typeof

、

instanceof

和其他一些可能）。如果您所在的分支中此检查返回true，则t