typescript - 为什么 TypeScript 无法检查函数的返回类型

Question

我有一个函数应该返回 NetworkState ;但是，从代码中可以看出，该函数在大多数情况下不会返回正确的类型，但 TypeScript 没有给出错误。我错过了什么？

第二次更新:
感谢大家的投入。我已经尽可能地复制和简化了代码，完整的代码可以复制并粘贴到 TypeScript 游乐场。不幸的是，我必须包含所有类型才能重现问题，因此代码比我希望的要长一些。请看最后一行，我认为应该有错误(因为返回类型)，但没有。

非常感谢任何帮助，谢谢。

更新和澄清:

示例 1:
const someFunction = (): string => 45
上述函数的返回类型是 string但是我们返回的是一个数字，因此 TypeScript 给出了一个错误:Type '45' is not assignable to type 'string'
示例 2:

type MyType = {
    [key: string]: string | undefined
}

const someFunction = (): MyType => 45

上述函数的返回类型是 MyType但是我们返回的是一个数字，因此 TypeScript 给出了一个错误: Type '45' is not assignable to type 'MyType'
以下代码的问题:

在下面的例子中 networkStateReducer预计返回 NetworkState类型。但是，即使它返回的数据不符合 NetworkState ，仍然没有错误。

如果我们仔细观察第一个 case例如:

case NetworkActionType.Failure:
      return { ...state, [action.payload.sagaAction]: 'SHOULD_BE_ERROR' }

假设 state最初是一个空对象，返回值是: [action.payload.sagaAction]等于某个字符串，但签名清楚地将其设置为一个对象:

  [key in NetworkSagaAction]?: {
    networkError?: Error
    networkStatus: NetworkStatus
  }

但是，我们没有从 TypeScript 中得到错误。

实际代码:

export type NetworkSagaAction = 'Login' | 'Logout'

export type NetworkStatus = 'idle' | 'pending' | 'failure' | 'success'

export enum NetworkActionType {
  Busy = 'Network/Busy',
  Failure = 'Network/Failure',
  Idle = 'Network/Idle',
  Reset = 'Network/Reset',
  Success = 'Network/Success',
}

export type NetworkState = {
  [key in NetworkSagaAction]?: {
    error?: Error
    networkStatus: NetworkStatus
  }
}

export interface NetworkPayload {
  sagaAction: NetworkSagaAction
}

export const initialState: NetworkState = {}

type FunctionType = (...args: any[]) => any

interface ActionCreatorsMapObject {
  [actionCreator: string]: FunctionType
}

export type ActionsUnion<A extends ActionCreatorsMapObject> = ReturnType<A[keyof A]>

export interface Action<T extends string> {
  type: T
}

export interface ActionWithPayload<T extends string, P> extends Action<T> {
  payload: P
}

export type BusyAction = ActionWithPayload<NetworkActionType.Busy, NetworkPayload>

export function createAction<T extends string, P>(type: T, payload: P): ActionWithPayload<T, P>
export function createAction<T extends string, P>(type: T, payload?: P) {
  return payload === undefined ? { type } : { type, payload }
}

export type NetworkActions = ActionsUnion<typeof NetworkActions>
export const NetworkActions = {
    busy: (payload: NetworkPayload): BusyAction => createAction(NetworkActionType.Busy, payload),
}

const networkStateReducer = (
    state = initialState,
    action: NetworkActions,
): NetworkState => { 
    return {
        [action.payload.sagaAction]: 'THIS SHOULD BE OBJECT BUT NOT AND STILL NO TYPE ERROR'
    }
}

Answer 1

TypeScript 无法正确推断 networkStateReducer() 的返回类型是什么将是因为您正在返回一个具有计算值的对象，该对象的具体值直到运行时才会知道。事实上，您已经以这样一种方式编写它，即无法推断返回的对象结构是什么(因此不可能抛出 TS 警告)。

仅考虑函数 networkStateReducer() :

const networkStateReducer = (
    state = initialState,
    action: NetworkActions,
): NetworkState => { 
    return {
        [action.payload.sagaAction]: 'THIS SHOULD BE OBJECT BUT NOT AND STILL NO TYPE ERROR'
    }
}

在这里， action.payload.sagaAction类型为 NetworkSagaAction , 两个字符串之一，或者 Login或 Logout . TypeScript 知道从这个函数返回的对象可以有匹配 NetworkSagaAction 类型的可选键。 ，所以它就检查那些。但是它不知道那些键上的对象的值应该是什么。从本质上讲，键的类型很容易根据编写的静态代码推断出来，但该键的值的类型直到运行时才能推断出来，因为它取决于键值。

这里的事情对你来说有点困惑，因为这两个值的类型应该是相同的:

export type NetworkState = {
  [key in NetworkSagaAction]?: {
    error?: Error
    networkStatus: NetworkStatus
  }
}

但是想象一下两个值的类型实际上不同的情况:

export type NetworkState = {
  Login?: {
    error?: Error
    networkStatus: NetworkStatus
  }
  Logout?: string
}

现在再次查看原始函数的代码:

const networkStateReducer = (
    state = initialState,
    action: NetworkActions,
): NetworkState => { 
    return {
        [action.payload.sagaAction]: 'THIS SHOULD BE OBJECT BUT NOT AND STILL NO TYPE ERROR'
    }
}

这个函数的返回类型是有效的还是无效的？如果 action.payload.sagaAction的值是 Login那么它是无效的，因为它应该是一个对象而不是字符串。但是如果值是 Logout那么返回类型是有效的，因为字符串是可以的。那么它是哪个？谁知道! (直到运行时)

现在理论上你可能认为 TypeScript 应该能够推断出，如果代码的编写保证了对象的所有键都具有相同的类型。我们甚至可以通过这样做使其更加明确:

export type NetworkSagaActionValue = {
  error?: Error
  networkStatus: NetworkStatus
}

export type NetworkState = {
  [key in NetworkSagaAction]?: NetworkSagaActionValue
}

但这似乎并不能解决问题。 TS 开发人员可能有一些非常聪明、复杂和有意的原因来解释为什么这不起作用。或者也许这只是将来会修复的疏忽或错误。

现在我看到您有两个主要选择，它们都涉及简单地更改您的 networkStateReducer()功能略。

您可以像这样从函数返回中单独强制执行对象值的类型:

const networkStateReducer = (
  state = initialState,
  action: NetworkActions,
): NetworkState => { 
  const returnValue: NetworkSagaActionValue = 'THIS SHOULD BE OBJECT BUT NOT AND STILL NO TYPE ERROR';
  // 'returnValue' errors because types don't match
  return {
      [action.payload.sagaAction]: returnValue
  }
}

或者，更冗长，但根据您的需要可能会更好 - 只需检查 action.payload.sagaAction 的值并从那里分支，允许您单独明确定义返回的对象:

const networkStateReducer = (
    state = initialState,
    action: NetworkActions,
): NetworkState => { 
  switch (action.payload.sagaAction) {
    case "Login":
      return {Login: 'THIS SHOULD BE OBJECT BUT NOT AND STILL NO TYPE ERROR'};
      // above return errors because types don't match
    case "Logout":
      return {Logout: {networkStatus: 'idle'}};
  }
}

如果有一种方法可以仅使用计算值以更优雅的方式解决这个问题，我很想知道自己，但据我所知，没有。