声明后从赋值推断 TypeScript 类型

Question

为 React 组件编写测试时，通常会在 beforeEach 块中初始化组件包装器（例如 wrapper），然后在后续测试中使用它。然而，为了做到这一点，你必须在赋值之前声明 wrapper 并给它一个明确的类型，否则 TypeScript 会抱怨缺少类型。不幸的是，这种类型的计算/写出可能非常复杂。

在下面的示例中，有什么方法可以“延迟”TypeScript 抱怨下面示例中缺少wrapper 的类型，并让它从分配wrapper 的位置推断类型？

或者，是否有更好的模式来布置变量以使输入更容易？

describe('suite', () => {
  // will trigger a no implicit any error
  // but it's quite complex to manually write out the type here
  let wrapper;

  beforeEach(() => {
    const SomeElement = complexFunctionWithGenericParams(someParam);

    // ideally, we want TS to infer the type of `wrapper` from this statement
    wrapper = mountComponent(<SomeElement />);
  })

  it('does something', () => {
    expect(wrapper.state.someField).toBe(5);
  }
}

Answer 1

没有办法从赋值中推断出类型，因为它应该在声明时推断出来。测试中局部变量的意义在于它们可以在块之间使用，这意味着它们可以被多次赋值。即使这种推论是可能的，也是模棱两可的：

let foo; // is the type supposed to be a number, or a string, or both, or any?

it('...', () => {
  foo = 1;
});

it('...', () => {
  foo = 'foo';
});

所以应该明确指定类型，例如ReturnType:

let wrapper: ReturnType<typeof mount>;

mount 是通用的，返回类型可能不同，ReturnType 可能是 more complicated with generic functions。

由于酶shallow 和mount 应该使用通用参数显式指定：

wrapper = mount<typeof SomeElement, ISomeElementProps>(<SomeElement />);

直接指定泛型类型更直接，因为它知道它是什么类型 (ReactWrapper)：

let wrapper: Enzyme.ReactWrapper<ISomeElementProps, ISomeElementState, typeof SomeElement>

Answer 2

虽然不是完全不同的模式，但以下内容有助于在类似情况下消除上述警告。

import { shallow, mount, ReactWrapper } from 'enzyme'

describe('suite', () => {
  let wrapper: ReactWrapper;

  beforeEach(() => {
    ...
    wrapper = mount or shallow 
  })

  it('does something', () => {
    ...
  }
}