代码之家 › 专栏 › 技术社区 › Afsanefda

Typescript—基于for of列表中的值的条件类型

typescript reactjs javascript

1

Afsanefda · 技术社区 · 5 年前

这就是我的类型:

export type typeOne = {
  A: string;
  B: string;
};

export type typeTwo = {
  A: string;
  C: string;
};

export type Result = typeOne | typeTwo; //condition

for (const item: Result of list) {
   const something = item.B ? 'B exsist' : item.C;
   return something;
}

TS2339:类型“Result”上不存在属性“B”。类型“typeTwo”上不存在属性“B”。

对于另一个:

你知道我该怎么修吗?

TS2483:“for…of”语句的左侧不能使用类型批注。

2 回复 | 直到 5 年前

1

2

Wex 5 年前

TypeScript的一个细微差别是,如果您有一个union类型的对象,那么您只能访问它们之间的公共字段。通常使用此技术添加一个公共字段来区分这两个字段。例如:

export type typeOne = {
  type: 'one';
  A: string;
  B: string;
};

export type typeTwo = {
  type: 'two'
  A: string;
  C: string;
};

export type Result = typeOne | typeTwo; //condition 

for (const item: Result of list) {
   const something = item.type === 'one' ? 'B exists' : item.C;
   return something;
}

在这种情况下, type https://basarat.gitbook.io/typescript/type-system/discriminated-unions

或者,可以创建自定义 type guard

function isTypeOne(result: Result): result is typeOne {
  return (result as typeOne).B !== undefined;
}

for (const item: Result of list) {
   const something = isTypeOne(item) ? 'B exists' : item.C;
   return something;
}

这里,如果 isTypeOne 失败, typeOne 可以安全地从 Result ,因此类型推断为 typeTwo

2

4

concat 5 年前

你可以用 an in type guard 要区分具有不等键的对象类型的并集,请执行以下操作:

for (const item: Result of list) {
   const something = "B" in item ? 'B exsist' : item.C;
   return something;
}

Playground link

3

0

wingmatt 5 年前

关于你提到的最后一个错误:

“TS2483:'for…of'语句的左侧不能使用类型批注。”

这个 Result list . 这样,就不需要指定语句的左侧是 结果 .

列表 是一个数组:

const list: Array<Result> = [{A: 'foo', B: 'bar'}, {A: 'foo', C: 'baz'}]
for (const item of list) {
  // Run code from other answers here
}