typescript 缩小无法解析出属性类型

Question

我在我的代码中遇到了这个问题:

interface Wide {
  prop: string | undefined
}

interface Narrow {
  prop: string
}

class Foo {
  prop: string
  constructor({ prop }: Narrow) {
    this.prop = prop
  }
}

const array = [{ prop: undefined }, { prop: 'foo' }]

array.forEach((obj: Wide) => {
  if (obj.prop && typeof obj.prop === 'string' && obj.prop !== undefined) {
    console.log(new Foo({ ...obj }))
    // Type 'undefined' is not assignable to type 'string'.
  }
})

通常，我认为 Typescript 能够推断出如果 if 条件通过，则意味着它正在迭代的当前 obj 有一个定义了类型为 string 的属性 prop。但我似乎无法让它工作。

Playground

Answer 1

您需要使用 Type guard (type predicate)

interface Wide {
  prop: string | undefined
}

interface Narrow {
  prop: string
}

class Foo {
  prop: string
  constructor({ prop }: Narrow) {
    this.prop = prop
  }
}

const array = [{ prop: undefined }, { prop: 'foo' }]

function isNarrow(obj: Wide | Narrow): obj is Narrow {
  return typeof obj.prop === 'string';
}

array.forEach((obj: Wide) => {
  if (isNarrow(obj)) {
    console.log(new Foo({ ...obj }));
  }
})

Playground